feat(vuepress-theme-reco): 新增代码主题配置
This commit is contained in:
vita2333
parent
5e05d2ed65
commit
10fcc3eab1
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,2 +1,3 @@
|
||||
node_modules
|
||||
yarn-error.log
|
||||
.idea
|
||||
|
||||
@ -87,6 +87,18 @@ module.exports = {
|
||||
avatar: "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png",
|
||||
link: 'https://vuepress-theme-reco.recoluan.com'
|
||||
},
|
||||
]
|
||||
],
|
||||
/**
|
||||
* support for
|
||||
* '' | 'default'
|
||||
* 'coy'
|
||||
* 'dark'
|
||||
* 'funky'
|
||||
* 'okaidia'
|
||||
* 'solarizedlight'
|
||||
* 'tomorrow'
|
||||
* 'twilight'
|
||||
*/
|
||||
codeTheme: 'tomorrow'
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,9 +45,10 @@ import pagination from '@theme/mixins/pagination'
|
||||
import { sortPostsByStickyAndDate, filterPosts } from '@theme/helpers/postData'
|
||||
import { getOneColor } from '@theme/helpers/other'
|
||||
import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
|
||||
import codeTheme from '@theme/mixins/codeTheme'
|
||||
|
||||
export default {
|
||||
mixins: [pagination, moduleTransitonMixin],
|
||||
mixins: [pagination, moduleTransitonMixin, codeTheme],
|
||||
components: { Common, NoteAbstract, ModuleTransition },
|
||||
|
||||
data () {
|
||||
@ -104,7 +105,6 @@ export default {
|
||||
|
||||
<style src="../styles/theme.styl" lang="stylus"></style>
|
||||
|
||||
<style src="prismjs/themes/prism-tomorrow.css"></style>
|
||||
<style lang="stylus" scoped>
|
||||
@require '../styles/mode.styl'
|
||||
.categories-wrapper
|
||||
|
||||
@ -13,10 +13,11 @@ import Page from '@theme/components/Page'
|
||||
import Footer from '@theme/components/Footer'
|
||||
import Common from '@theme/components/Common'
|
||||
import { resolveSidebarItems } from '@theme/helpers/utils'
|
||||
import codeTheme from '@theme/mixins/codeTheme'
|
||||
|
||||
export default {
|
||||
components: { HomeBlog, Home, Page, Common, Footer },
|
||||
|
||||
mixins: [codeTheme],
|
||||
computed: {
|
||||
sidebarItems () {
|
||||
return resolveSidebarItems(
|
||||
@ -37,5 +38,4 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="prismjs/themes/prism-tomorrow.css"></style>
|
||||
<style src="../styles/theme.styl" lang="stylus"></style>
|
||||
|
||||
@ -39,9 +39,10 @@ import pagination from '@theme/mixins/pagination'
|
||||
import ModuleTransition from '@theme/components/ModuleTransition'
|
||||
import { sortPostsByStickyAndDate, filterPosts } from '@theme/helpers/postData'
|
||||
import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
|
||||
import codeTheme from '@theme/mixins/codeTheme'
|
||||
|
||||
export default {
|
||||
mixins: [pagination, moduleTransitonMixin],
|
||||
mixins: [pagination, moduleTransitonMixin, codeTheme],
|
||||
components: { Common, NoteAbstract, TagList, ModuleTransition },
|
||||
|
||||
data () {
|
||||
@ -99,7 +100,6 @@ export default {
|
||||
|
||||
<style src="../styles/theme.styl" lang="stylus"></style>
|
||||
|
||||
<style src="prismjs/themes/prism-tomorrow.css"></style>
|
||||
<style lang="stylus" scoped>
|
||||
@require '../styles/mode.styl'
|
||||
.tag-wrapper
|
||||
|
||||
@ -87,7 +87,6 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="prismjs/themes/prism-tomorrow.css"></style>
|
||||
<style src="../styles/theme.styl" lang="stylus"></style>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
30
packages/vuepress-theme-reco/mixins/codeTheme.js
Normal file
30
packages/vuepress-theme-reco/mixins/codeTheme.js
Normal file
@ -0,0 +1,30 @@
|
||||
export default {
|
||||
created () {
|
||||
switch (this.$themeConfig.codeTheme) {
|
||||
case 'coy':
|
||||
import('prismjs/themes/prism-coy.css')
|
||||
break
|
||||
case 'dark':
|
||||
import('prismjs/themes/prism-dark.css')
|
||||
break
|
||||
case 'funky':
|
||||
import('prismjs/themes/prism-funky.css')
|
||||
break
|
||||
case 'okaidia':
|
||||
import('prismjs/themes/prism-okaidia.css')
|
||||
break
|
||||
case 'solarizedlight':
|
||||
import('prismjs/themes/prism-solarizedlight.css')
|
||||
break
|
||||
case 'tomorrow':
|
||||
import('prismjs/themes/prism-tomorrow.css')
|
||||
break
|
||||
case 'twilight':
|
||||
import('prismjs/themes/prism-twilight.css')
|
||||
break
|
||||
default:
|
||||
import('prismjs/themes/prism.css')
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,135 +1,135 @@
|
||||
.content__default
|
||||
code
|
||||
color lighten($textColor, 20%)
|
||||
padding 0.25rem 0.5rem
|
||||
margin 0
|
||||
font-size 0.85em
|
||||
background-color var(--code-color)
|
||||
border-radius 3px
|
||||
.token
|
||||
&.deleted
|
||||
color #EC5975
|
||||
&.inserted
|
||||
color $accentColor
|
||||
|
||||
.content__default
|
||||
pre, pre[class*="language-"]
|
||||
line-height 1.4
|
||||
padding 1.25rem 1.5rem
|
||||
margin 0.85rem 0
|
||||
background-color $codeBgColor
|
||||
border-radius 6px
|
||||
overflow auto
|
||||
code
|
||||
color #fff
|
||||
padding 0
|
||||
background-color transparent
|
||||
border-radius 0
|
||||
|
||||
div[class*="language-"]
|
||||
position relative
|
||||
background-color $codeBgColor
|
||||
border-radius 6px
|
||||
.highlight-lines
|
||||
user-select none
|
||||
padding-top 1.3rem
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
width 100%
|
||||
line-height 1.4
|
||||
.highlighted
|
||||
background-color rgba(0, 0, 0, 66%)
|
||||
pre, pre[class*="language-"]
|
||||
background transparent
|
||||
position relative
|
||||
z-index 1
|
||||
&::before
|
||||
position absolute
|
||||
z-index 3
|
||||
top 0.8em
|
||||
right 1em
|
||||
font-size 0.75rem
|
||||
color rgba(255, 255, 255, 0.4)
|
||||
&:not(.line-numbers-mode)
|
||||
.line-numbers-wrapper
|
||||
display none
|
||||
&.line-numbers-mode
|
||||
.highlight-lines .highlighted
|
||||
position relative
|
||||
&:before
|
||||
content ' '
|
||||
position absolute
|
||||
z-index 3
|
||||
left 0
|
||||
top 0
|
||||
display block
|
||||
width $lineNumbersWrapperWidth
|
||||
height 100%
|
||||
background-color rgba(0, 0, 0, 66%)
|
||||
pre
|
||||
padding-left $lineNumbersWrapperWidth + 1 rem
|
||||
vertical-align middle
|
||||
.line-numbers-wrapper
|
||||
position absolute
|
||||
top 0
|
||||
width $lineNumbersWrapperWidth
|
||||
text-align center
|
||||
color rgba(255, 255, 255, 0.3)
|
||||
padding 1.25rem 0
|
||||
line-height 1.4
|
||||
br
|
||||
user-select none
|
||||
.line-number
|
||||
position relative
|
||||
z-index 4
|
||||
user-select none
|
||||
font-size 0.85em
|
||||
&::after
|
||||
content ''
|
||||
position absolute
|
||||
z-index 2
|
||||
top 0
|
||||
left 0
|
||||
width $lineNumbersWrapperWidth
|
||||
height 100%
|
||||
border-radius 6px 0 0 6px
|
||||
border-right 1px solid rgba(0, 0, 0, 66%)
|
||||
background-color $codeBgColor
|
||||
|
||||
|
||||
for lang in $codeLang
|
||||
div{'[class~="language-' + lang + '"]'}
|
||||
&:before
|
||||
content ('' + lang)
|
||||
|
||||
div[class~="language-javascript"]
|
||||
&:before
|
||||
content "js"
|
||||
|
||||
div[class~="language-typescript"]
|
||||
&:before
|
||||
content "ts"
|
||||
|
||||
div[class~="language-markup"]
|
||||
&:before
|
||||
content "html"
|
||||
|
||||
div[class~="language-markdown"]
|
||||
&:before
|
||||
content "md"
|
||||
|
||||
div[class~="language-json"]:before
|
||||
content "json"
|
||||
|
||||
div[class~="language-ruby"]:before
|
||||
content "rb"
|
||||
|
||||
div[class~="language-python"]:before
|
||||
content "py"
|
||||
|
||||
div[class~="language-bash"]:before
|
||||
content "sh"
|
||||
|
||||
div[class~="language-php"]:before
|
||||
content "php"
|
||||
//.content__default
|
||||
// code
|
||||
// color lighten($textColor, 20%)
|
||||
// padding 0.25rem 0.5rem
|
||||
// margin 0
|
||||
// font-size 0.85em
|
||||
// background-color var(--code-color)
|
||||
// border-radius 3px
|
||||
// .token
|
||||
// &.deleted
|
||||
// color #EC5975
|
||||
// &.inserted
|
||||
// color $accentColor
|
||||
//
|
||||
//.content__default
|
||||
// pre, pre[class*="language-"]
|
||||
// line-height 1.4
|
||||
// padding 1.25rem 1.5rem
|
||||
// margin 0.85rem 0
|
||||
// background-color $codeBgColor
|
||||
// border-radius 6px
|
||||
// overflow auto
|
||||
// code
|
||||
// color #fff
|
||||
// padding 0
|
||||
// background-color transparent
|
||||
// border-radius 0
|
||||
//
|
||||
//div[class*="language-"]
|
||||
// position relative
|
||||
// background-color $codeBgColor
|
||||
// border-radius 6px
|
||||
// .highlight-lines
|
||||
// user-select none
|
||||
// padding-top 1.3rem
|
||||
// position absolute
|
||||
// top 0
|
||||
// left 0
|
||||
// width 100%
|
||||
// line-height 1.4
|
||||
// .highlighted
|
||||
// background-color rgba(0, 0, 0, 66%)
|
||||
// pre, pre[class*="language-"]
|
||||
// background transparent
|
||||
// position relative
|
||||
// z-index 1
|
||||
// &::before
|
||||
// position absolute
|
||||
// z-index 3
|
||||
// top 0.8em
|
||||
// right 1em
|
||||
// font-size 0.75rem
|
||||
// color rgba(255, 255, 255, 0.4)
|
||||
// &:not(.line-numbers-mode)
|
||||
// .line-numbers-wrapper
|
||||
// display none
|
||||
// &.line-numbers-mode
|
||||
// .highlight-lines .highlighted
|
||||
// position relative
|
||||
// &:before
|
||||
// content ' '
|
||||
// position absolute
|
||||
// z-index 3
|
||||
// left 0
|
||||
// top 0
|
||||
// display block
|
||||
// width $lineNumbersWrapperWidth
|
||||
// height 100%
|
||||
// background-color rgba(0, 0, 0, 66%)
|
||||
// pre
|
||||
// padding-left $lineNumbersWrapperWidth + 1 rem
|
||||
// vertical-align middle
|
||||
// .line-numbers-wrapper
|
||||
// position absolute
|
||||
// top 0
|
||||
// width $lineNumbersWrapperWidth
|
||||
// text-align center
|
||||
// color rgba(255, 255, 255, 0.3)
|
||||
// padding 1.25rem 0
|
||||
// line-height 1.4
|
||||
// br
|
||||
// user-select none
|
||||
// .line-number
|
||||
// position relative
|
||||
// z-index 4
|
||||
// user-select none
|
||||
// font-size 0.85em
|
||||
// &::after
|
||||
// content ''
|
||||
// position absolute
|
||||
// z-index 2
|
||||
// top 0
|
||||
// left 0
|
||||
// width $lineNumbersWrapperWidth
|
||||
// height 100%
|
||||
// border-radius 6px 0 0 6px
|
||||
// border-right 1px solid rgba(0, 0, 0, 66%)
|
||||
// background-color $codeBgColor
|
||||
//
|
||||
//
|
||||
//for lang in $codeLang
|
||||
// div{'[class~="language-' + lang + '"]'}
|
||||
// &:before
|
||||
// content ('' + lang)
|
||||
//
|
||||
//div[class~="language-javascript"]
|
||||
// &:before
|
||||
// content "js"
|
||||
//
|
||||
//div[class~="language-typescript"]
|
||||
// &:before
|
||||
// content "ts"
|
||||
//
|
||||
//div[class~="language-markup"]
|
||||
// &:before
|
||||
// content "html"
|
||||
//
|
||||
//div[class~="language-markdown"]
|
||||
// &:before
|
||||
// content "md"
|
||||
//
|
||||
//div[class~="language-json"]:before
|
||||
// content "json"
|
||||
//
|
||||
//div[class~="language-ruby"]:before
|
||||
// content "rb"
|
||||
//
|
||||
//div[class~="language-python"]:before
|
||||
// content "py"
|
||||
//
|
||||
//div[class~="language-bash"]:before
|
||||
// content "sh"
|
||||
//
|
||||
//div[class~="language-php"]:before
|
||||
// content "php"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user