style: adjust default style (#347)

This commit is contained in:
YangFong 2024-08-22 22:52:35 +08:00 committed by GitHub
parent a65c86e2ee
commit 908b244112
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 660 additions and 700 deletions

53
src/config/api.ts Normal file
View File

@ -0,0 +1,53 @@
export const githubConfig = {
username: `filess`,
repoList: Array.from(
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
e => `img${e}`,
),
branch: `main`,
accessTokenList: [
`7715d7ca67b5d3837cfdoocsmde8c38421815aa423510af`,
`c411415bf95dbe39625doocsmd5047ba9b7a2a6c9642abe`,
`2821cd8819fa345c053doocsmdca86ac653f8bc20db1f1b`,
`445f0dae46ef1f2a4d6doocsmdc797301e94797b4750a4c`,
`cc1d0c1426d0fd0902bdoocsmdd2d7184b14da61b86ec46`,
`b67e9d15cb6f910492fdoocsmdac6b44d379c953bb19eff`,
`618c4dc2244ccbbc088doocsmd125d17fd31b7d06a50cf3`,
`a4b581732e1c1507458doocsmdc5b223b27dae5e2e16a55`,
`77904db41aee57ad79bdoocsmd760f848201dac9c96fd5e`,
`02f251cb14ac62ab100doocsmdddbfc8527d773f1f04ce1`,
`eb321079a95ba7028d9doocsmde2e84c502dac70de7cf08`,
`22f74fcfb071a961fa2doocsmde28dabc746f0503a15e5d`,
`85124c2bfe7abba0938doocsmd0af7f67918b99d085a5fd`,
`0a561b4d4bbecb2de7edoocsmdd9ba3833d11dbc5e430f5`,
`e8a01491188d8d5a097doocsmd03ede0aad1fe9e3af24e9`,
`36e1f420d7e5bdebd67doocsmd65463562f5f25b20b8377`,
],
}
export const giteeConfig = {
username: `filesss`,
repoList: Array.from(
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
e => `img${e}`,
),
branch: `main`,
accessTokenList: [
`ed5fc9866bd6c2fdoocsmddd433f806fd2f399c`,
`5448ffebbbf1151doocsmdc4e337cf814fc8a62`,
`25b05efd2557ca2doocsmd75b5c0835e3395911`,
`11628c7a5aef015doocsmd2eeff9fb9566f0458`,
`cb2f5145ed938dedoocsmdbd063b4ed244eecf8`,
`d8c0b57500672c1doocsmd55f48b866b5ebcd98`,
`78c56eadb88e453doocsmd43ddd95753351771a`,
`03e1a688003948fdoocsmda16fcf41e6f03f1f0`,
`c49121cf4d191fbdoocsmdd6a7877ed537e474a`,
`adfeb2fadcdc4aadoocsmdfe1ee869ac9c968ff`,
`116c94549ca4a0ddoocsmd192653af5c0694616`,
`ecf30ed7f2eb184doocsmd51ea4ec8300371d9e`,
`5837cf2bd5afd93doocsmd73904bed31934949e`,
`b5b7e1c7d57e01fdoocsmd5266f552574297d78`,
`684d55564ffbd0bdoocsmd7d747e5cc23aed6d6`,
`3fc04a9d272ab71doocsmd010c56cb57d88d2ba`,
],
}

View File

@ -1,698 +1,5 @@
export * from './api'
export * from './style'
export * from './theme'
export const prefix = `MD`
export const fontFamilyOptions = [
{
label: `无衬线`,
value: `-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif`,
desc: `字体123Abc`,
},
{
label: `衬线`,
value: `Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif`,
desc: `字体123Abc`,
},
{
label: `等宽`,
value: `Menlo, Monaco, 'Courier New', monospace`,
desc: `字体123Abc`,
},
]
export const fontSizeOptions = [
{
label: `12px`,
value: `12px`,
desc: `更小`,
},
{
label: `13px`,
value: `13px`,
desc: `稍小`,
},
{
label: `14px`,
value: `14px`,
desc: `推荐`,
},
{
label: `15px`,
value: `15px`,
desc: `稍大`,
},
{
label: `16px`,
value: `16px`,
desc: `更大`,
},
]
export const colorOptions = [
{
label: `经典蓝`,
value: `rgba(15, 76, 129, 1)`,
desc: `最新流行`,
},
{
label: `翡翠绿`,
value: `rgba(0, 152, 116, 1)`,
desc: `优雅清新`,
},
{
label: `活力橘`,
value: `rgba(250, 81, 81, 1)`,
desc: `热情活泼`,
},
// { label: `微信绿`, value: `rgb(26, 173, 25,1)`, desc: `经典微信绿` },
]
const codeBlockUrlPrefix = `https://cdn.bootcdn.net/ajax/libs/highlight.js/11.10.0/styles/`
const codeBlockThemeList = [
`1c-light.min.css`,
`a11y-dark.min.css`,
`a11y-light.min.css`,
`agate.min.css`,
`an-old-hope.min.css`,
`androidstudio.min.css`,
`arduino-light.min.css`,
`arta.min.css`,
`ascetic.min.css`,
`atom-one-dark-reasonable.min.css`,
`atom-one-dark.min.css`,
`atom-one-light.min.css`,
`brown-paper.min.css`,
`codepen-embed.min.css`,
`color-brewer.min.css`,
`dark.min.css`,
`default.min.css`,
`devibeans.min.css`,
`docco.min.css`,
`far.min.css`,
`felipec.min.css`,
`foundation.min.css`,
`github-dark-dimmed.min.css`,
`github-dark.min.css`,
`github.min.css`,
`gml.min.css`,
`googlecode.min.css`,
`gradient-dark.min.css`,
`gradient-light.min.css`,
`grayscale.min.css`,
`hybrid.min.css`,
`idea.min.css`,
`intellij-light.min.css`,
`ir-black.min.css`,
`isbl-editor-dark.min.css`,
`isbl-editor-light.min.css`,
`kimbie-dark.min.css`,
`kimbie-light.min.css`,
`lightfair.min.css`,
`lioshi.min.css`,
`magula.min.css`,
`mono-blue.min.css`,
`monokai-sublime.min.css`,
`monokai.min.css`,
`night-owl.min.css`,
`nnfx-dark.min.css`,
`nnfx-light.min.css`,
`nord.min.css`,
`obsidian.min.css`,
`panda-syntax-dark.min.css`,
`panda-syntax-light.min.css`,
`paraiso-dark.min.css`,
`paraiso-light.min.css`,
`pojoaque.min.css`,
`purebasic.min.css`,
`qtcreator-dark.min.css`,
`qtcreator-light.min.css`,
`rainbow.min.css`,
`routeros.min.css`,
`school-book.min.css`,
`shades-of-purple.min.css`,
`srcery.min.css`,
`stackoverflow-dark.min.css`,
`stackoverflow-light.min.css`,
`sunburst.min.css`,
`tokyo-night-dark.min.css`,
`tokyo-night-light.min.css`,
`tomorrow-night-blue.min.css`,
`tomorrow-night-bright.min.css`,
`vs.min.css`,
`vs2015.min.css`,
`xcode.min.css`,
`xt256.min.css`,
]
export const codeBlockThemeOptions = [
...codeBlockThemeList.map((codeBlockTheme) => {
const url = `${codeBlockUrlPrefix}${codeBlockTheme}`
const label = codeBlockTheme.replace(`.min.css`, ``)
return {
label,
value: url,
}
}),
]
export const legendOptions = [
{
label: `title 优先`,
value: `title-alt`,
desc: ``,
},
{
label: `alt 优先`,
value: `alt-title`,
desc: ``,
},
{
label: `只显示 title`,
value: `title`,
desc: ``,
},
{
label: `只显示 alt`,
value: `alt`,
desc: ``,
},
{
label: `不显示`,
value: `none`,
desc: ``,
},
]
export const githubConfig = {
username: `filess`,
repoList: Array.from(
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
e => `img${e}`,
),
branch: `main`,
accessTokenList: [
`7715d7ca67b5d3837cfdoocsmde8c38421815aa423510af`,
`c411415bf95dbe39625doocsmd5047ba9b7a2a6c9642abe`,
`2821cd8819fa345c053doocsmdca86ac653f8bc20db1f1b`,
`445f0dae46ef1f2a4d6doocsmdc797301e94797b4750a4c`,
`cc1d0c1426d0fd0902bdoocsmdd2d7184b14da61b86ec46`,
`b67e9d15cb6f910492fdoocsmdac6b44d379c953bb19eff`,
`618c4dc2244ccbbc088doocsmd125d17fd31b7d06a50cf3`,
`a4b581732e1c1507458doocsmdc5b223b27dae5e2e16a55`,
`77904db41aee57ad79bdoocsmd760f848201dac9c96fd5e`,
`02f251cb14ac62ab100doocsmdddbfc8527d773f1f04ce1`,
`eb321079a95ba7028d9doocsmde2e84c502dac70de7cf08`,
`22f74fcfb071a961fa2doocsmde28dabc746f0503a15e5d`,
`85124c2bfe7abba0938doocsmd0af7f67918b99d085a5fd`,
`0a561b4d4bbecb2de7edoocsmdd9ba3833d11dbc5e430f5`,
`e8a01491188d8d5a097doocsmd03ede0aad1fe9e3af24e9`,
`36e1f420d7e5bdebd67doocsmd65463562f5f25b20b8377`,
],
}
export const giteeConfig = {
username: `filesss`,
repoList: Array.from(
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
e => `img${e}`,
),
branch: `main`,
accessTokenList: [
`ed5fc9866bd6c2fdoocsmddd433f806fd2f399c`,
`5448ffebbbf1151doocsmdc4e337cf814fc8a62`,
`25b05efd2557ca2doocsmd75b5c0835e3395911`,
`11628c7a5aef015doocsmd2eeff9fb9566f0458`,
`cb2f5145ed938dedoocsmdbd063b4ed244eecf8`,
`d8c0b57500672c1doocsmd55f48b866b5ebcd98`,
`78c56eadb88e453doocsmd43ddd95753351771a`,
`03e1a688003948fdoocsmda16fcf41e6f03f1f0`,
`c49121cf4d191fbdoocsmdd6a7877ed537e474a`,
`adfeb2fadcdc4aadoocsmdfe1ee869ac9c968ff`,
`116c94549ca4a0ddoocsmd192653af5c0694616`,
`ecf30ed7f2eb184doocsmd51ea4ec8300371d9e`,
`5837cf2bd5afd93doocsmd73904bed31934949e`,
`b5b7e1c7d57e01fdoocsmd5266f552574297d78`,
`684d55564ffbd0bdoocsmd7d747e5cc23aed6d6`,
`3fc04a9d272ab71doocsmd010c56cb57d88d2ba`,
],
}
const baseColor = `#3f3f3f`
const baseBorderColor = `rgba(215, 16, 166, 0.8)`
export const defaultTheme = {
BASE: {
'text-align': `left`,
'line-height': `1.75`,
},
block: {
// 一级标题样式
h1: {
'font-size': `1.2em`,
'text-align': `center`,
'font-weight': `bold`,
'display': `table`,
'margin': `2em auto 1em`,
'padding': `0 1em`,
'border-bottom': `2px solid rgba(0, 152, 116, 0.9)`,
'color': `var(--el-text-color-regular)`,
},
// 二级标题样式
h2: {
'font-size': `1.2em`,
'text-align': `center`,
'font-weight': `bold`,
'display': `table`,
'margin': `4em auto 2em`,
'padding': `0 0.2em`,
'background': `rgba(0, 152, 116, 0.9)`,
'color': `#fff`,
},
// 三级标题样式
h3: {
'font-weight': `bold`,
'font-size': `1.1em`,
'margin': `2em 8px 0.75em 0`,
'line-height': `1.2`,
'padding-left': `8px`,
'border-left': `3px solid rgba(0, 152, 116, 0.9)`,
'color': `var(--el-text-color-regular)`,
},
// 四级标题样式
h4: {
'font-weight': `bold`,
'font-size': `1em`,
'margin': `2em 8px 0.5em`,
'color': `rgba(66, 185, 131, 0.9)`,
},
// 段落样式
p: {
'margin': `1.5em 8px`,
'letter-spacing': `0.1em`,
'color': `var(--el-text-color-regular)`,
'text-align': `justify`,
},
// 引用样式
blockquote: {
'font-style': `normal`,
'border-left': `none`,
'padding': `1em`,
'border-radius': `8px`,
'color': `rgba(0,0,0,0.5)`,
'background': `#f7f7f7`,
'margin': `2em 8px`,
},
blockquote_p: {
'letter-spacing': `0.1em`,
'color': `rgb(80, 80, 80)`,
'font-size': `1em`,
'display': `block`,
},
code_pre: {
'font-size': `14px`,
'overflow-x': `auto`,
'border-radius': `8px`,
'padding': `1em`,
'line-height': `1.5`,
'margin': `10px 8px`,
},
code: {
'margin': 0,
'white-space': `nowrap`,
'font-family': `Menlo, Operator Mono, Consolas, Monaco, monospace`,
},
image: {
'border-radius': `4px`,
'display': `block`,
'margin': `0.1em auto 0.5em`,
'width': `100% !important`,
},
ol: {
'margin-left': `0`,
'padding-left': `1em`,
'color': `var(--el-text-color-regular)`,
},
ul: {
'margin-left': `0`,
'padding-left': `1em`,
'list-style': `circle`,
'color': `var(--el-text-color-regular)`,
},
footnotes: {
'margin': `0.5em 8px`,
'font-size': `80%`,
'color': `var(--el-text-color-regular)`,
},
figure: {
margin: `1.5em 8px`,
color: `var(--el-text-color-regular)`,
},
hr: {
'border-style': `solid`,
'border-width': `1px 0 0`,
'border-color': `rgba(0,0,0,0.1)`,
'-webkit-transform-origin': `0 0`,
'-webkit-transform': `scale(1, 0.5)`,
'transform-origin': `0 0`,
'transform': `scale(1, 0.5)`,
},
},
inline: {
listitem: {
'text-indent': `-1em`,
'display': `block`,
'margin': `0.2em 8px`,
'color': `var(--el-text-color-regular)`,
},
codespan: {
'font-size': `90%`,
'color': `#d14`,
'background': `rgba(27,31,35,.05)`,
'padding': `3px 5px`,
'border-radius': `4px`,
// 'word-break': `break-all`,
},
link: {
color: `#576b95`,
},
wx_link: {
'color': `#576b95`,
'text-decoration': `none`,
},
// 字体加粗样式
strong: {
'color': `rgba(15, 76, 129, 0.9)`,
'font-weight': `bold`,
},
table: {
'border-collapse': `collapse`,
'text-align': `center`,
'margin': `1em 8px`,
'color': `var(--el-text-color-regular)`,
},
thead: {
'background': `rgba(0, 0, 0, 0.05)`,
'font-weight': `bold`,
'color': `var(--el-text-color-regular)`,
},
td: {
border: `1px solid #dfdfdf`,
padding: `0.25em 0.5em`,
color: baseColor,
},
footnote: {
'font-size': `12px`,
'color': `var(--el-text-color-regular)`,
},
figcaption: {
'text-align': `center`,
'color': `#888`,
'font-size': `0.8em`,
},
},
}
export const graceTheme = {
BASE: {
'text-align': `left`,
'line-height': `1.75`,
},
block: {
'h1': {
'font-size': `1.4em`,
'text-align': `center`,
'font-weight': `bold`,
'display': `table`,
'margin': `2em auto 1em`,
'padding': `0.5em 1em`,
'border-bottom': `2px solid ${baseBorderColor}`,
'color': `var(--el-text-color-regular)`,
'text-shadow': `2px 2px 4px rgba(0,0,0,0.1)`,
'transition': `all 0.3s ease`,
'&:hover': {
'transform': `translateY(-3px)`,
'box-shadow': `0 10px 20px rgba(0,0,0,0.1)`,
},
},
'h2': {
'font-size': `1.3em`,
'text-align': `center`,
'font-weight': `bold`,
'display': `table`,
'margin': `4em auto 2em`,
'padding': `0.3em 1em`,
'background': `${baseBorderColor}`,
'color': `#fff`,
'border-radius': `8px`,
'box-shadow': `0 4px 6px rgba(0,0,0,0.1)`,
'transition': `all 0.3s ease`,
'&:hover': {
'transform': `scale(1.05)`,
'box-shadow': `0 6px 8px rgba(0,0,0,0.15)`,
},
},
'h3': {
'font-weight': `bold`,
'font-size': `1.2em`,
'margin': `2em 8px 0.75em 0`,
'line-height': `1.2`,
'padding-left': `12px`,
'border-left': `4px solid ${baseBorderColor}`,
'border-bottom': `1px solid ${baseBorderColor}`,
'color': `var(--el-text-color-regular)`,
'transition': `all 0.3s ease`,
'&:hover': {
'padding-left': `16px`,
'border-left-width': `6px`,
},
},
'h4': {
'font-weight': `bold`,
'font-size': `1.1em`,
'margin': `2em 8px 0.5em`,
'color': `rgba(66, 185, 131, 0.9)`,
'transition': `color 0.3s ease`,
'&:hover': {
color: `rgba(66, 185, 131, 1)`,
},
},
'p': {
'margin': `1.5em 8px`,
'letter-spacing': `0.1em`,
'color': `var(--el-text-color-regular)`,
'text-align': `justify`,
'transition': `all 0.3s ease`,
'&:hover': {
transform: `translateX(3px)`,
},
},
'blockquote': {
'font-style': `italic`,
'border-left': `4px solid ${baseBorderColor}`,
'padding': `1em 1em 1em 2em`,
'border-radius': `6px`,
'color': `rgba(0,0,0,0.6)`,
'background': `linear-gradient(to right, #f7f7f7, #ffffff)`,
'margin': `2em 8px`,
'box-shadow': `0 4px 6px rgba(0,0,0,0.05)`,
'transition': `all 0.3s ease`,
'&:hover': {
'transform': `translateY(-3px)`,
'box-shadow': `0 6px 8px rgba(0,0,0,0.1)`,
},
},
'blockquote_p': {
'letter-spacing': `0.1em`,
'color': `rgb(80, 80, 80)`,
'font-size': `1em`,
'display': `block`,
},
'code_pre': {
'font-size': `14px`,
'overflow-x': `auto`,
'border-radius': `8px`,
'padding': `1em`,
'line-height': `1.5`,
'margin': `10px 8px`,
'box-shadow': `inset 0 0 10px rgba(0,0,0,0.05)`,
'transition': `all 0.3s ease`,
'&:hover': {
'box-shadow': `inset 0 0 15px rgba(0,0,0,0.1)`,
},
},
'code': {
'margin': 0,
'white-space': `pre-wrap`,
'font-family': `'Fira Code', Menlo, Operator Mono, Consolas, Monaco, monospace`,
},
'image': {
'border-radius': `8px`,
'display': `block`,
'margin': `0.1em auto 0.5em`,
'width': `100% !important`,
'box-shadow': `0 4px 8px rgba(0,0,0,0.1)`,
'transition': `all 0.3s ease`,
'&:hover': {
'transform': `scale(1.02)`,
'box-shadow': `0 6px 12px rgba(0,0,0,0.15)`,
},
},
'ol': {
'margin-left': `0`,
'padding-left': `1.5em`,
'color': `var(--el-text-color-regular)`,
},
'ul': {
'margin-left': `0`,
'padding-left': `1.5em`,
'list-style': `none`,
'color': `var(--el-text-color-regular)`,
},
'ul li::before': {
'content': `"•"`,
'color': `rgba(0, 152, 116, 0.9)`,
'font-weight': `bold`,
'display': `inline-block`,
'width': `1em`,
'margin-left': `-1em`,
},
'hr': {
border: `none`,
height: `1px`,
background: `linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0))`,
margin: `2em 0`,
},
},
inline: {
'listitem': {
'text-indent': `-1em`,
'display': `block`,
'margin': `0.5em 8px`,
'color': `var(--el-text-color-regular)`,
'transition': `all 0.3s ease`,
'&:hover': {
transform: `translateX(5px)`,
},
},
'codespan': {
'font-size': `90%`,
'color': `#d14`,
'background': `rgba(27,31,35,.05)`,
'padding': `3px 5px`,
'border-radius': `4px`,
'transition': `all 0.3s ease`,
'&:hover': {
background: `rgba(27,31,35,.1)`,
},
},
'link': {
'color': `#576b95`,
'transition': `all 0.3s ease`,
'&:hover': {
'color': `#1a3f6f`,
'text-decoration': `underline`,
},
},
'wx_link': {
},
'strong': {
'color': `rgba(15, 76, 129, 0.9)`,
'font-weight': `bold`,
'transition': `all 0.3s ease`,
'&:hover': {
'color': `rgba(15, 76, 129, 1)`,
'text-shadow': `1px 1px 2px rgba(15, 76, 129, 0.2)`,
},
},
'table': {
'border-collapse': `separate`,
'border-spacing': `0`,
'text-align': `center`,
'margin': `1em 8px`,
'color': `var(--el-text-color-regular)`,
'box-shadow': `0 4px 6px rgba(0,0,0,0.1)`,
'border-radius': `8px`,
'overflow': `hidden`,
},
'thead': {
'background': `linear-gradient(45deg, rgba(0, 152, 116, 0.9), rgba(0, 192, 146, 0.9))`,
'color': `#fff`,
'font-weight': `bold`,
},
'td': {
border: `1px solid #dfdfdf`,
padding: `0.5em 1em`,
color: baseColor,
transition: `all 0.3s ease`,
},
'tr:hover td': {
background: `rgba(0, 152, 116, 0.05)`,
},
'footnote': {
'font-size': `12px`,
'color': `rgba(0,0,0,0.5)`,
'transition': `all 0.3s ease`,
'&:hover': {
color: `rgba(0,0,0,0.7)`,
},
},
},
}
export const themeOptions = [
{
label: `经典`,
value: `default`,
desc: ``,
},
{
label: `优雅`,
value: `grace`,
desc: ``,
},
]
export const themeMap = {
default: defaultTheme,
grace: graceTheme,
}

180
src/config/style.ts Normal file
View File

@ -0,0 +1,180 @@
export const fontFamilyOptions = [
{
label: `无衬线`,
value: `-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif`,
desc: `字体123Abc`,
},
{
label: `衬线`,
value: `Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif`,
desc: `字体123Abc`,
},
{
label: `等宽`,
value: `Menlo, Monaco, 'Courier New', monospace`,
desc: `字体123Abc`,
},
]
export const fontSizeOptions = [
{
label: `12px`,
value: `12px`,
desc: `更小`,
},
{
label: `13px`,
value: `13px`,
desc: `稍小`,
},
{
label: `14px`,
value: `14px`,
desc: `推荐`,
},
{
label: `15px`,
value: `15px`,
desc: `稍大`,
},
{
label: `16px`,
value: `16px`,
desc: `更大`,
},
]
export const colorOptions = [
{
label: `经典蓝`,
value: `rgba(15, 76, 129, 1)`,
desc: `最新流行`,
},
{
label: `翡翠绿`,
value: `rgba(0, 152, 116, 1)`,
desc: `优雅清新`,
},
{
label: `活力橘`,
value: `rgba(250, 81, 81, 1)`,
desc: `热情活泼`,
},
// { label: `微信绿`, value: `rgb(26, 173, 25,1)`, desc: `经典微信绿` },
]
const codeBlockUrlPrefix = `https://cdn.bootcdn.net/ajax/libs/highlight.js/11.10.0/styles/`
const codeBlockThemeList = [
`1c-light.min.css`,
`a11y-dark.min.css`,
`a11y-light.min.css`,
`agate.min.css`,
`an-old-hope.min.css`,
`androidstudio.min.css`,
`arduino-light.min.css`,
`arta.min.css`,
`ascetic.min.css`,
`atom-one-dark-reasonable.min.css`,
`atom-one-dark.min.css`,
`atom-one-light.min.css`,
`brown-paper.min.css`,
`codepen-embed.min.css`,
`color-brewer.min.css`,
`dark.min.css`,
`default.min.css`,
`devibeans.min.css`,
`docco.min.css`,
`far.min.css`,
`felipec.min.css`,
`foundation.min.css`,
`github-dark-dimmed.min.css`,
`github-dark.min.css`,
`github.min.css`,
`gml.min.css`,
`googlecode.min.css`,
`gradient-dark.min.css`,
`gradient-light.min.css`,
`grayscale.min.css`,
`hybrid.min.css`,
`idea.min.css`,
`intellij-light.min.css`,
`ir-black.min.css`,
`isbl-editor-dark.min.css`,
`isbl-editor-light.min.css`,
`kimbie-dark.min.css`,
`kimbie-light.min.css`,
`lightfair.min.css`,
`lioshi.min.css`,
`magula.min.css`,
`mono-blue.min.css`,
`monokai-sublime.min.css`,
`monokai.min.css`,
`night-owl.min.css`,
`nnfx-dark.min.css`,
`nnfx-light.min.css`,
`nord.min.css`,
`obsidian.min.css`,
`panda-syntax-dark.min.css`,
`panda-syntax-light.min.css`,
`paraiso-dark.min.css`,
`paraiso-light.min.css`,
`pojoaque.min.css`,
`purebasic.min.css`,
`qtcreator-dark.min.css`,
`qtcreator-light.min.css`,
`rainbow.min.css`,
`routeros.min.css`,
`school-book.min.css`,
`shades-of-purple.min.css`,
`srcery.min.css`,
`stackoverflow-dark.min.css`,
`stackoverflow-light.min.css`,
`sunburst.min.css`,
`tokyo-night-dark.min.css`,
`tokyo-night-light.min.css`,
`tomorrow-night-blue.min.css`,
`tomorrow-night-bright.min.css`,
`vs.min.css`,
`vs2015.min.css`,
`xcode.min.css`,
`xt256.min.css`,
].sort()
export const codeBlockThemeOptions = [
...codeBlockThemeList.map((codeBlockTheme) => {
const url = `${codeBlockUrlPrefix}${codeBlockTheme}`
const label = codeBlockTheme.replace(`.min.css`, ``)
return {
label,
value: url,
}
}),
]
export const legendOptions = [
{
label: `title 优先`,
value: `title-alt`,
desc: ``,
},
{
label: `alt 优先`,
value: `alt-title`,
desc: ``,
},
{
label: `只显示 title`,
value: `title`,
desc: ``,
},
{
label: `只显示 alt`,
value: `alt`,
desc: ``,
},
{
label: `不显示`,
value: `none`,
desc: ``,
},
]

418
src/config/theme.ts Normal file
View File

@ -0,0 +1,418 @@
interface Theme {
BASE: Record<string, string | number>
block: Record<string, Record<string, string | number>>
inline: Record<string, Record<string, string | number>>
}
const baseColor = `#3f3f3f`
const baseBorderColor = `rgba(215, 16, 166, 0.8)`
function mergeTheme(defaultTheme: Theme, newTheme: Theme) {
const res: Theme = {
BASE: {
...defaultTheme.BASE,
...newTheme.BASE,
},
block: {},
inline: {},
}
for (const el in defaultTheme.block) {
res.block[el] = {
...defaultTheme.block[el],
...newTheme.block[el],
}
}
for (const el in defaultTheme.inline) {
res.inline[el] = {
...defaultTheme.inline[el],
...newTheme.inline[el],
}
}
return res
}
const defaultTheme = {
BASE: {
'text-align': `left`,
'line-height': `1.75`,
},
block: {
// 一级标题样式
h1: {
'font-size': `1.2em`,
'text-align': `center`,
'font-weight': `bold`,
'display': `table`,
'margin': `2em auto 1em`,
'padding': `0 1em`,
'border-bottom': `2px solid rgba(0, 152, 116, 0.9)`,
'color': `var(--el-text-color-regular)`,
},
// 二级标题样式
h2: {
'font-size': `1.2em`,
'text-align': `center`,
'font-weight': `bold`,
'display': `table`,
'margin': `4em auto 2em`,
'padding': `0 0.2em`,
'background': `rgba(0, 152, 116, 0.9)`,
'color': `#fff`,
},
// 三级标题样式
h3: {
'font-weight': `bold`,
'font-size': `1.1em`,
'margin': `2em 8px 0.75em 0`,
'line-height': `1.2`,
'padding-left': `8px`,
'border-left': `3px solid rgba(0, 152, 116, 0.9)`,
'color': `var(--el-text-color-regular)`,
},
// 四级标题样式
h4: {
'font-weight': `bold`,
'font-size': `1em`,
'margin': `2em 8px 0.5em`,
'color': `rgba(66, 185, 131, 0.9)`,
},
// 段落样式
p: {
'margin': `1.5em 8px`,
'letter-spacing': `0.1em`,
'color': `var(--el-text-color-regular)`,
'text-align': `justify`,
},
// 引用样式
blockquote: {
'font-style': `normal`,
'border-left': `none`,
'padding': `1em`,
'border-radius': `8px`,
'color': `rgba(0,0,0,0.5)`,
'background': `#f7f7f7`,
'margin': `2em 8px`,
},
blockquote_p: {
'letter-spacing': `0.1em`,
'color': `rgb(80, 80, 80)`,
'font-size': `1em`,
'display': `block`,
},
code_pre: {
'font-size': `14px`,
'overflow-x': `auto`,
'border-radius': `8px`,
'padding': `1em`,
'line-height': `1.5`,
'margin': `10px 8px`,
},
code: {
'margin': 0,
'white-space': `nowrap`,
'font-family': `Menlo, Operator Mono, Consolas, Monaco, monospace`,
},
image: {
'border-radius': `4px`,
'display': `block`,
'margin': `0.1em auto 0.5em`,
'width': `100% !important`,
},
ol: {
'margin-left': `0`,
'padding-left': `1em`,
'color': `var(--el-text-color-regular)`,
},
ul: {
'margin-left': `0`,
'padding-left': `1em`,
'list-style': `circle`,
'color': `var(--el-text-color-regular)`,
},
footnotes: {
'margin': `0.5em 8px`,
'font-size': `80%`,
'color': `var(--el-text-color-regular)`,
},
figure: {
margin: `1.5em 8px`,
color: `var(--el-text-color-regular)`,
},
hr: {
'border-style': `solid`,
'border-width': `1px 0 0`,
'border-color': `rgba(0,0,0,0.1)`,
'-webkit-transform-origin': `0 0`,
'-webkit-transform': `scale(1, 0.5)`,
'transform-origin': `0 0`,
'transform': `scale(1, 0.5)`,
},
},
inline: {
listitem: {
'text-indent': `-1em`,
'display': `block`,
'margin': `0.2em 8px`,
'color': `var(--el-text-color-regular)`,
},
codespan: {
'font-size': `90%`,
'color': `#d14`,
'background': `rgba(27,31,35,.05)`,
'padding': `3px 5px`,
'border-radius': `4px`,
// 'word-break': `break-all`,
},
link: {
color: `#576b95`,
},
wx_link: {
'color': `#576b95`,
'text-decoration': `none`,
},
// 字体加粗样式
strong: {
'color': `rgba(15, 76, 129, 0.9)`,
'font-weight': `bold`,
},
table: {
'border-collapse': `collapse`,
'text-align': `center`,
'margin': `1em 8px`,
'color': `var(--el-text-color-regular)`,
},
thead: {
'background': `rgba(0, 0, 0, 0.05)`,
'font-weight': `bold`,
'color': `var(--el-text-color-regular)`,
},
td: {
border: `1px solid #dfdfdf`,
padding: `0.25em 0.5em`,
color: baseColor,
},
footnote: {
'font-size': `12px`,
'color': `var(--el-text-color-regular)`,
},
figcaption: {
'text-align': `center`,
'color': `#888`,
'font-size': `0.8em`,
},
},
}
const graceTheme = mergeTheme(defaultTheme, {
BASE: {
'text-align': `left`,
'line-height': `1.75`,
},
block: {
h1: {
'font-size': `1.4em`,
'text-align': `center`,
'font-weight': `bold`,
'display': `table`,
'margin': `2em auto 1em`,
'padding': `0.5em 1em`,
'border-bottom': `2px solid ${baseBorderColor}`,
'color': `var(--el-text-color-regular)`,
'text-shadow': `2px 2px 4px rgba(0,0,0,0.1)`,
},
h2: {
'font-size': `1.3em`,
'text-align': `center`,
'font-weight': `bold`,
'display': `table`,
'margin': `4em auto 2em`,
'padding': `0.3em 1em`,
'background': `${baseBorderColor}`,
'color': `#fff`,
'border-radius': `8px`,
'box-shadow': `0 4px 6px rgba(0,0,0,0.1)`,
},
h3: {
'font-weight': `bold`,
'font-size': `1.2em`,
'margin': `2em 8px 0.75em 0`,
'line-height': `1.2`,
'padding-left': `12px`,
'border-left': `4px solid ${baseBorderColor}`,
'border-bottom': `1px solid ${baseBorderColor}`,
'color': `var(--el-text-color-regular)`,
},
h4: {
'font-weight': `bold`,
'font-size': `1.1em`,
'margin': `2em 8px 0.5em`,
'color': `rgba(66, 185, 131, 0.9)`,
},
p: {
'margin': `1.5em 8px`,
'letter-spacing': `0.1em`,
'color': `var(--el-text-color-regular)`,
'text-align': `justify`,
},
blockquote: {
'font-style': `italic`,
'border-left': `4px solid ${baseBorderColor}`,
'padding': `1em 1em 1em 2em`,
'border-radius': `6px`,
'color': `rgba(0,0,0,0.6)`,
'background': `linear-gradient(to right, #f7f7f7, #ffffff)`,
'margin': `2em 8px`,
'box-shadow': `0 4px 6px rgba(0,0,0,0.05)`,
},
blockquote_p: {
'letter-spacing': `0.1em`,
'color': `rgb(80, 80, 80)`,
'font-size': `1em`,
'display': `block`,
},
code_pre: {
'font-size': `14px`,
'overflow-x': `auto`,
'border-radius': `8px`,
'padding': `1em`,
'line-height': `1.5`,
'margin': `10px 8px`,
'box-shadow': `inset 0 0 10px rgba(0,0,0,0.05)`,
},
code: {
'margin': 0,
'white-space': `pre-wrap`,
'font-family': `'Fira Code', Menlo, Operator Mono, Consolas, Monaco, monospace`,
},
image: {
'border-radius': `8px`,
'display': `block`,
'margin': `0.1em auto 0.5em`,
'width': `100% !important`,
'box-shadow': `0 4px 8px rgba(0,0,0,0.1)`,
},
ol: {
'margin-left': `0`,
'padding-left': `1.5em`,
'color': `var(--el-text-color-regular)`,
},
ul: {
'margin-left': `0`,
'padding-left': `1.5em`,
'list-style': `none`,
'color': `var(--el-text-color-regular)`,
},
hr: {
border: `none`,
height: `1px`,
background: `linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0))`,
margin: `2em 0`,
},
},
inline: {
listitem: {
'text-indent': `-1em`,
'display': `block`,
'margin': `0.5em 8px`,
'color': `var(--el-text-color-regular)`,
},
codespan: {
'font-size': `90%`,
'color': `#d14`,
'background': `rgba(27,31,35,.05)`,
'padding': `3px 5px`,
'border-radius': `4px`,
},
link: {
color: `#576b95`,
},
wx_link: {
},
strong: {
'color': `rgba(15, 76, 129, 0.9)`,
'font-weight': `bold`,
},
table: {
'border-collapse': `separate`,
'border-spacing': `0`,
'text-align': `center`,
'margin': `1em 8px`,
'color': `var(--el-text-color-regular)`,
'box-shadow': `0 4px 6px rgba(0,0,0,0.1)`,
'border-radius': `8px`,
'overflow': `hidden`,
},
thead: {
'background': `linear-gradient(45deg, rgba(0, 152, 116, 0.9), rgba(0, 192, 146, 0.9))`,
'color': `#fff`,
'font-weight': `bold`,
},
td: {
border: `1px solid #dfdfdf`,
padding: `0.5em 1em`,
color: baseColor,
},
footnote: {
'font-size': `12px`,
'color': `rgba(0,0,0,0.5)`,
},
},
})
export const themeOptions = [
{
label: `经典`,
value: `default`,
desc: ``,
},
{
label: `优雅`,
value: `grace`,
desc: ``,
},
]
export const themeMap = {
default: defaultTheme,
grace: graceTheme,
}

View File

@ -66,13 +66,15 @@ class WxRenderer extends Renderer {
}
buildFootnotes = () => {
if (!this.footnotes.length)
if (!this.footnotes.length) {
return ``
}
const footnoteArray = this.footnotes
.map(([index, title, link]) =>
link === title
? `<code style="font-size: 90%; opacity: 0.6;">[${index}]</code>: <i>${title}</i><br/>`
: `<code style="font-size: 90%; opacity: 0.6;">[${index}]</code> ${title}: <i>${link}</i><br/>`,
? `<code style="font-size: 90%; opacity: 0.6;">[${index}]</code>: <i style="word-break: break-all">${title}</i><br/>`
: `<code style="font-size: 90%; opacity: 0.6;">[${index}]</code> ${title}: <i style="word-break: break-all">${link}</i><br/>`,
)
.join(`\n`)
return `<h4 ${this.getStyles(`h4`)}>引用链接</h4><p ${this.getStyles(