zhuyijun/vuepress-theme-reco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #208 from vita2333/develop

Browse Source 
新增代码主题配置
This commit is contained in:
reco_luan 2020-06-28 22:17:39 +08:00 committed by GitHub
commit f5f13c669d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 185 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
node_modules
yarn-error.log
.idea

14
example/.vuepress/config.js
View File

@ -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'
}
}

4
packages/vuepress-theme-reco/layouts/Category.vue
View File

@ -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

4
packages/vuepress-theme-reco/layouts/Layout.vue
View File

@ -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>

4
packages/vuepress-theme-reco/layouts/Tag.vue
View File

@ -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

1
packages/vuepress-theme-reco/layouts/Tags.vue
View File

@ -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
View 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
}
}
}

270
packages/vuepress-theme-reco/styles/code.styl
View File

@ -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"