Skip to content

Commit 10fcc3e

Browse files
PingziDevPingziDev
committed
feat(vuepress-theme-reco): 新增代码主题配置
1 parent 5e05d2e commit 10fcc3e

File tree

8 files changed

+185
-143
lines changed

8 files changed

+185
-143
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
node_modules
22
yarn-error.log
3+
.idea

‎example/.vuepress/config.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,18 @@ module.exports = {
8787
avatar: "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png",
8888
link: 'https://vuepress-theme-reco.recoluan.com'
8989
},
90-
]
90+
],
91+
/**
92+
* support for
93+
* '' | 'default'
94+
* 'coy'
95+
* 'dark'
96+
* 'funky'
97+
* 'okaidia'
98+
* 'solarizedlight'
99+
* 'tomorrow'
100+
* 'twilight'
101+
*/
102+
codeTheme: 'tomorrow'
91103
}
92104
}

‎packages/vuepress-theme-reco/layouts/Category.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,10 @@ import pagination from '@theme/mixins/pagination'
4545
import { sortPostsByStickyAndDate, filterPosts } from '@theme/helpers/postData'
4646
import { getOneColor } from '@theme/helpers/other'
4747
import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
48+
import codeTheme from '@theme/mixins/codeTheme'
4849
4950
export default {
50-
mixins: [pagination, moduleTransitonMixin],
51+
mixins: [pagination, moduleTransitonMixin, codeTheme],
5152
components: { Common, NoteAbstract, ModuleTransition },
5253
5354
data () {
@@ -104,7 +105,6 @@ export default {
104105

105106
<style src="../styles/theme.styl" lang="stylus"></style>
106107

107-
<style src="prismjs/themes/prism-tomorrow.css"></style>
108108
<style lang="stylus" scoped>
109109
@require '../styles/mode.styl'
110110
.categories-wrapper

‎packages/vuepress-theme-reco/layouts/Layout.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,11 @@ import Page from '@theme/components/Page'
1313
import Footer from '@theme/components/Footer'
1414
import Common from '@theme/components/Common'
1515
import { resolveSidebarItems } from '@theme/helpers/utils'
16+
import codeTheme from '@theme/mixins/codeTheme'
1617
1718
export default {
1819
components: { HomeBlog, Home, Page, Common, Footer },
19-
20+
mixins: [codeTheme],
2021
computed: {
2122
sidebarItems () {
2223
return resolveSidebarItems(
@@ -37,5 +38,4 @@ export default {
3738
}
3839
</script>
3940

40-
<style src="prismjs/themes/prism-tomorrow.css"></style>
4141
<style src="../styles/theme.styl" lang="stylus"></style>

‎packages/vuepress-theme-reco/layouts/Tag.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,10 @@ import pagination from '@theme/mixins/pagination'
3939
import ModuleTransition from '@theme/components/ModuleTransition'
4040
import { sortPostsByStickyAndDate, filterPosts } from '@theme/helpers/postData'
4141
import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
42+
import codeTheme from '@theme/mixins/codeTheme'
4243
4344
export default {
44-
mixins: [pagination, moduleTransitonMixin],
45+
mixins: [pagination, moduleTransitonMixin, codeTheme],
4546
components: { Common, NoteAbstract, TagList, ModuleTransition },
4647
4748
data () {
@@ -99,7 +100,6 @@ export default {
99100

100101
<style src="../styles/theme.styl" lang="stylus"></style>
101102

102-
<style src="prismjs/themes/prism-tomorrow.css"></style>
103103
<style lang="stylus" scoped>
104104
@require '../styles/mode.styl'
105105
.tag-wrapper

‎packages/vuepress-theme-reco/layouts/Tags.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,6 @@ export default {
8787
}
8888
</script>
8989

90-
<style src="prismjs/themes/prism-tomorrow.css"></style>
9190
<style src="../styles/theme.styl" lang="stylus"></style>
9291

9392
<style lang="stylus" scoped>

‎packages/vuepress-theme-reco/mixins/codeTheme.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
export default {
2+
created () {
3+
switch (this.$themeConfig.codeTheme) {
4+
case 'coy':
5+
import('prismjs/themes/prism-coy.css')
6+
break
7+
case 'dark':
8+
import('prismjs/themes/prism-dark.css')
9+
break
10+
case 'funky':
11+
import('prismjs/themes/prism-funky.css')
12+
break
13+
case 'okaidia':
14+
import('prismjs/themes/prism-okaidia.css')
15+
break
16+
case 'solarizedlight':
17+
import('prismjs/themes/prism-solarizedlight.css')
18+
break
19+
case 'tomorrow':
20+
import('prismjs/themes/prism-tomorrow.css')
21+
break
22+
case 'twilight':
23+
import('prismjs/themes/prism-twilight.css')
24+
break
25+
default:
26+
import('prismjs/themes/prism.css')
27+
break
28+
}
29+
}
30+
}

‎packages/vuepress-theme-reco/styles/code.styl‎

Lines changed: 135 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,135 @@
1-
.content__default
2-
code
3-
color lighten($textColor, 20%)
4-
padding 0.25rem 0.5rem
5-
margin 0
6-
font-size 0.85em
7-
background-color var(--code-color)
8-
border-radius 3px
9-
.token
10-
&.deleted
11-
color #EC5975
12-
&.inserted
13-
color $accentColor
14-
15-
.content__default
16-
pre, pre[class*="language-"]
17-
line-height 1.4
18-
padding 1.25rem 1.5rem
19-
margin 0.85rem 0
20-
background-color $codeBgColor
21-
border-radius 6px
22-
overflow auto
23-
code
24-
color #fff
25-
padding 0
26-
background-color transparent
27-
border-radius 0
28-
29-
div[class*="language-"]
30-
position relative
31-
background-color $codeBgColor
32-
border-radius 6px
33-
.highlight-lines
34-
user-select none
35-
padding-top 1.3rem
36-
position absolute
37-
top 0
38-
left 0
39-
width 100%
40-
line-height 1.4
41-
.highlighted
42-
background-color rgba(0, 0, 0, 66%)
43-
pre, pre[class*="language-"]
44-
background transparent
45-
position relative
46-
z-index 1
47-
&::before
48-
position absolute
49-
z-index 3
50-
top 0.8em
51-
right 1em
52-
font-size 0.75rem
53-
color rgba(255, 255, 255, 0.4)
54-
&:not(.line-numbers-mode)
55-
.line-numbers-wrapper
56-
display none
57-
&.line-numbers-mode
58-
.highlight-lines .highlighted
59-
position relative
60-
&:before
61-
content ' '
62-
position absolute
63-
z-index 3
64-
left 0
65-
top 0
66-
display block
67-
width $lineNumbersWrapperWidth
68-
height 100%
69-
background-color rgba(0, 0, 0, 66%)
70-
pre
71-
padding-left $lineNumbersWrapperWidth + 1 rem
72-
vertical-align middle
73-
.line-numbers-wrapper
74-
position absolute
75-
top 0
76-
width $lineNumbersWrapperWidth
77-
text-align center
78-
color rgba(255, 255, 255, 0.3)
79-
padding 1.25rem 0
80-
line-height 1.4
81-
br
82-
user-select none
83-
.line-number
84-
position relative
85-
z-index 4
86-
user-select none
87-
font-size 0.85em
88-
&::after
89-
content ''
90-
position absolute
91-
z-index 2
92-
top 0
93-
left 0
94-
width $lineNumbersWrapperWidth
95-
height 100%
96-
border-radius 6px 0 0 6px
97-
border-right 1px solid rgba(0, 0, 0, 66%)
98-
background-color $codeBgColor
99-
100-
101-
for lang in $codeLang
102-
div{'[class~="language-' + lang + '"]'}
103-
&:before
104-
content ('' + lang)
105-
106-
div[class~="language-javascript"]
107-
&:before
108-
content "js"
109-
110-
div[class~="language-typescript"]
111-
&:before
112-
content "ts"
113-
114-
div[class~="language-markup"]
115-
&:before
116-
content "html"
117-
118-
div[class~="language-markdown"]
119-
&:before
120-
content "md"
121-
122-
div[class~="language-json"]:before
123-
content "json"
124-
125-
div[class~="language-ruby"]:before
126-
content "rb"
127-
128-
div[class~="language-python"]:before
129-
content "py"
130-
131-
div[class~="language-bash"]:before
132-
content "sh"
133-
134-
div[class~="language-php"]:before
135-
content "php"
1+
//.content__default
2+
// code
3+
// color lighten($textColor, 20%)
4+
// padding 0.25rem 0.5rem
5+
// margin 0
6+
// font-size 0.85em
7+
// background-color var(--code-color)
8+
// border-radius 3px
9+
// .token
10+
// &.deleted
11+
// color #EC5975
12+
// &.inserted
13+
// color $accentColor
14+
//
15+
//.content__default
16+
// pre, pre[class*="language-"]
17+
// line-height 1.4
18+
// padding 1.25rem 1.5rem
19+
// margin 0.85rem 0
20+
// background-color $codeBgColor
21+
// border-radius 6px
22+
// overflow auto
23+
// code
24+
// color #fff
25+
// padding 0
26+
// background-color transparent
27+
// border-radius 0
28+
//
29+
//div[class*="language-"]
30+
// position relative
31+
// background-color $codeBgColor
32+
// border-radius 6px
33+
// .highlight-lines
34+
// user-select none
35+
// padding-top 1.3rem
36+
// position absolute
37+
// top 0
38+
// left 0
39+
// width 100%
40+
// line-height 1.4
41+
// .highlighted
42+
// background-color rgba(0, 0, 0, 66%)
43+
// pre, pre[class*="language-"]
44+
// background transparent
45+
// position relative
46+
// z-index 1
47+
// &::before
48+
// position absolute
49+
// z-index 3
50+
// top 0.8em
51+
// right 1em
52+
// font-size 0.75rem
53+
// color rgba(255, 255, 255, 0.4)
54+
// &:not(.line-numbers-mode)
55+
// .line-numbers-wrapper
56+
// display none
57+
// &.line-numbers-mode
58+
// .highlight-lines .highlighted
59+
// position relative
60+
// &:before
61+
// content ' '
62+
// position absolute
63+
// z-index 3
64+
// left 0
65+
// top 0
66+
// display block
67+
// width $lineNumbersWrapperWidth
68+
// height 100%
69+
// background-color rgba(0, 0, 0, 66%)
70+
// pre
71+
// padding-left $lineNumbersWrapperWidth + 1 rem
72+
// vertical-align middle
73+
// .line-numbers-wrapper
74+
// position absolute
75+
// top 0
76+
// width $lineNumbersWrapperWidth
77+
// text-align center
78+
// color rgba(255, 255, 255, 0.3)
79+
// padding 1.25rem 0
80+
// line-height 1.4
81+
// br
82+
// user-select none
83+
// .line-number
84+
// position relative
85+
// z-index 4
86+
// user-select none
87+
// font-size 0.85em
88+
// &::after
89+
// content ''
90+
// position absolute
91+
// z-index 2
92+
// top 0
93+
// left 0
94+
// width $lineNumbersWrapperWidth
95+
// height 100%
96+
// border-radius 6px 0 0 6px
97+
// border-right 1px solid rgba(0, 0, 0, 66%)
98+
// background-color $codeBgColor
99+
//
100+
//
101+
//for lang in $codeLang
102+
// div{'[class~="language-' + lang + '"]'}
103+
// &:before
104+
// content ('' + lang)
105+
//
106+
//div[class~="language-javascript"]
107+
// &:before
108+
// content "js"
109+
//
110+
//div[class~="language-typescript"]
111+
// &:before
112+
// content "ts"
113+
//
114+
//div[class~="language-markup"]
115+
// &:before
116+
// content "html"
117+
//
118+
//div[class~="language-markdown"]
119+
// &:before
120+
// content "md"
121+
//
122+
//div[class~="language-json"]:before
123+
// content "json"
124+
//
125+
//div[class~="language-ruby"]:before
126+
// content "rb"
127+
//
128+
//div[class~="language-python"]:before
129+
// content "py"
130+
//
131+
//div[class~="language-bash"]:before
132+
// content "sh"
133+
//
134+
//div[class~="language-php"]:before
135+
// content "php"

0 commit comments

Comments
 (0)
⚡