feat: blockquote style
This commit is contained in:
@@ -335,6 +335,10 @@ export const I18N = {
|
|||||||
zh: `高亮`,
|
zh: `高亮`,
|
||||||
en: `Highlight`,
|
en: `Highlight`,
|
||||||
},
|
},
|
||||||
|
blockquote: {
|
||||||
|
zh: `引用`,
|
||||||
|
en: `Blockquote`,
|
||||||
|
},
|
||||||
diy_style: {
|
diy_style: {
|
||||||
zh: `自定义样式`,
|
zh: `自定义样式`,
|
||||||
en: `Custom Style`,
|
en: `Custom Style`,
|
||||||
|
|||||||
@@ -269,6 +269,7 @@ export const OPT_STYLE_DASHLINE = "dash_line"; // 虚线
|
|||||||
export const OPT_STYLE_WAVYLINE = "wavy_line"; // 波浪线
|
export const OPT_STYLE_WAVYLINE = "wavy_line"; // 波浪线
|
||||||
export const OPT_STYLE_FUZZY = "fuzzy"; // 模糊
|
export const OPT_STYLE_FUZZY = "fuzzy"; // 模糊
|
||||||
export const OPT_STYLE_HIGHLIGHT = "highlight"; // 高亮
|
export const OPT_STYLE_HIGHLIGHT = "highlight"; // 高亮
|
||||||
|
export const OPT_STYLE_BLOCKQUOTE = "blockquote"; // 引用
|
||||||
export const OPT_STYLE_DIY = "diy_style"; // 自定义样式
|
export const OPT_STYLE_DIY = "diy_style"; // 自定义样式
|
||||||
export const OPT_STYLE_ALL = [
|
export const OPT_STYLE_ALL = [
|
||||||
OPT_STYLE_NONE,
|
OPT_STYLE_NONE,
|
||||||
@@ -278,6 +279,7 @@ export const OPT_STYLE_ALL = [
|
|||||||
OPT_STYLE_WAVYLINE,
|
OPT_STYLE_WAVYLINE,
|
||||||
OPT_STYLE_FUZZY,
|
OPT_STYLE_FUZZY,
|
||||||
OPT_STYLE_HIGHLIGHT,
|
OPT_STYLE_HIGHLIGHT,
|
||||||
|
OPT_STYLE_BLOCKQUOTE,
|
||||||
OPT_STYLE_DIY,
|
OPT_STYLE_DIY,
|
||||||
];
|
];
|
||||||
export const OPT_STYLE_USE_COLOR = [
|
export const OPT_STYLE_USE_COLOR = [
|
||||||
@@ -286,6 +288,7 @@ export const OPT_STYLE_USE_COLOR = [
|
|||||||
OPT_STYLE_DASHLINE,
|
OPT_STYLE_DASHLINE,
|
||||||
OPT_STYLE_WAVYLINE,
|
OPT_STYLE_WAVYLINE,
|
||||||
OPT_STYLE_HIGHLIGHT,
|
OPT_STYLE_HIGHLIGHT,
|
||||||
|
OPT_STYLE_BLOCKQUOTE,
|
||||||
];
|
];
|
||||||
|
|
||||||
export const OPT_MOUSEKEY_DISABLE = "mk_disable";
|
export const OPT_MOUSEKEY_DISABLE = "mk_disable";
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ import {
|
|||||||
OPT_STYLE_WAVYLINE,
|
OPT_STYLE_WAVYLINE,
|
||||||
OPT_STYLE_FUZZY,
|
OPT_STYLE_FUZZY,
|
||||||
OPT_STYLE_HIGHLIGHT,
|
OPT_STYLE_HIGHLIGHT,
|
||||||
|
OPT_STYLE_BLOCKQUOTE,
|
||||||
OPT_STYLE_DIY,
|
OPT_STYLE_DIY,
|
||||||
DEFAULT_COLOR,
|
DEFAULT_COLOR,
|
||||||
MSG_TRANS_CURRULE,
|
MSG_TRANS_CURRULE,
|
||||||
@@ -34,6 +35,18 @@ const LineSpan = styled("span")`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const BlockquoteSpan = styled("span")`
|
||||||
|
opacity: 0.6;
|
||||||
|
-webkit-opacity: 0.6;
|
||||||
|
display: block;
|
||||||
|
padding: 0 0.75em;
|
||||||
|
border-left: 0.25em solid ${(props) => props.$lineColor};
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-opacity: 1;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
const FuzzySpan = styled("span")`
|
const FuzzySpan = styled("span")`
|
||||||
filter: blur(0.2em);
|
filter: blur(0.2em);
|
||||||
-webkit-filter: blur(0.2em);
|
-webkit-filter: blur(0.2em);
|
||||||
@@ -86,6 +99,12 @@ function StyledSpan({ textStyle, textDiyStyle, bgColor, children }) {
|
|||||||
{children}
|
{children}
|
||||||
</HighlightSpan>
|
</HighlightSpan>
|
||||||
);
|
);
|
||||||
|
case OPT_STYLE_BLOCKQUOTE: // 引用
|
||||||
|
return (
|
||||||
|
<BlockquoteSpan $lineColor={bgColor || DEFAULT_COLOR}>
|
||||||
|
{children}
|
||||||
|
</BlockquoteSpan>
|
||||||
|
);
|
||||||
case OPT_STYLE_DIY: // 自定义
|
case OPT_STYLE_DIY: // 自定义
|
||||||
return <DiySpan $diyStyle={textDiyStyle}>{children}</DiySpan>;
|
return <DiySpan $diyStyle={textDiyStyle}>{children}</DiySpan>;
|
||||||
default:
|
default:
|
||||||
|
|||||||
Reference in New Issue
Block a user