Skip to content

Commit ae9dcdf

Browse files
sdrassdras
authored
Syntax highlighting (#245)
* work on some highlighting * more highlights * more highlights * further highlights * more highlights * add in language designations * we missed a 500 style * update the font weight on the site name * work on highlighted lines * work on line highlighting again * fix the border on line highlighting * make line numbers less severe * make line numbers less severe
1 parent 597f406 commit ae9dcdf

File tree

3 files changed

+123
-71
lines changed

3 files changed

+123
-71
lines changed

‎src/.vuepress/theme/components/Navbar.vue

Lines changed: 83 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,13 @@
22
<header class="navbar">
33
<SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" />
44

5-
<RouterLink
6-
:to="$localePath"
7-
class="home-link"
8-
>
5+
<RouterLink :to="$localePath" class="home-link">
96
<img
107
v-if="$site.themeConfig.logo"
118
class="logo"
129
:src="$withBase($site.themeConfig.logo)"
1310
:alt="$siteTitle"
14-
>
11+
/>
1512
<span
1613
v-if="$siteTitle"
1714
ref="siteName"
@@ -26,11 +23,10 @@
2623
'max-width': linksWrapMaxWidth + 'px'
2724
} : {}"
2825
>
29-
<AlgoliaSearchBox
30-
v-if="isAlgoliaSearch"
31-
:options="algolia"
26+
<AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia" />
27+
<SearchBox
28+
v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"
3229
/>
33-
<SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
3430
<NavLinks class="can-hide" />
3531
</div>
3632
</header>
@@ -52,39 +48,45 @@ export default {
5248
AlgoliaSearchBox
5349
},
5450
55-
data () {
51+
data() {
5652
return {
5753
linksWrapMaxWidth: null
5854
}
5955
},
6056
6157
computed: {
62-
algolia () {
63-
return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
58+
algolia() {
59+
return (
60+
this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
61+
)
6462
},
6563
66-
isAlgoliaSearch () {
64+
isAlgoliaSearch() {
6765
return this.algolia && this.algolia.apiKey && this.algolia.indexName
6866
}
6967
},
7068
71-
mounted () {
69+
mounted() {
7270
const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
73-
const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
71+
const NAVBAR_VERTICAL_PADDING =
72+
parseInt(css(this.$el, 'paddingLeft')) +
73+
parseInt(css(this.$el, 'paddingRight'))
7474
const handleLinksWrapWidth = () => {
7575
if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
7676
this.linksWrapMaxWidth = null
7777
} else {
78-
this.linksWrapMaxWidth = this.$el.offsetWidth - NAVBAR_VERTICAL_PADDING
79-
- (this.$refs.siteName && this.$refs.siteName.offsetWidth || 0)
78+
this.linksWrapMaxWidth =
79+
this.$el.offsetWidth -
80+
NAVBAR_VERTICAL_PADDING -
81+
((this.$refs.siteName && this.$refs.siteName.offsetWidth) || 0)
8082
}
8183
}
8284
handleLinksWrapWidth()
8385
window.addEventListener('resize', handleLinksWrapWidth, false)
8486
}
8587
}
8688
87-
function css (el, property) {
89+
function css(el, property) {
8890
// NOTE: Known bug, will return 'auto' if style value is 'auto'
8991
const win = el.ownerDocument.defaultView
9092
// null means not to return pseudo styles
@@ -93,48 +95,67 @@ function css (el, property) {
9395
</script>
9496

9597
<style lang="stylus">
96-
$navbar-vertical-padding = 0.7rem
97-
$navbar-horizontal-padding = 1.5rem
98-
99-
.navbar
100-
padding $navbar-vertical-padding $navbar-horizontal-padding
101-
line-height $navbarHeight - 1.4rem
102-
a, span, img
103-
display inline-block
104-
.logo
105-
height $navbarHeight - 1.4rem
106-
min-width $navbarHeight - 1.4rem
107-
margin-right 0.5rem
108-
vertical-align top
109-
.site-name
110-
font-size 1.3rem
111-
font-weight 600
112-
color $textColor
113-
position relative
114-
.links
115-
padding-left 1.5rem
116-
box-sizing border-box
117-
background-color white
118-
white-space nowrap
119-
font-size 0.9rem
120-
position absolute
121-
right $navbar-horizontal-padding
122-
top $navbar-vertical-padding
123-
display flex
124-
.search-box
125-
flex: 0 0 auto
126-
vertical-align top
127-
128-
@media (max-width: $MQMobile)
129-
.navbar
130-
padding-left 4rem
131-
.can-hide
132-
display none
133-
.links
134-
padding-left 1.5rem
135-
.site-name
136-
width calc(100vw - 9.4rem)
137-
overflow hidden
138-
white-space nowrap
139-
text-overflow ellipsis
98+
$navbar-vertical-padding = 0.7rem;
99+
$navbar-horizontal-padding = 1.5rem;
100+
101+
.navbar {
102+
padding: $navbar-vertical-padding $navbar-horizontal-padding;
103+
line-height: $navbarHeight - 1.4rem;
104+
105+
a, span, img {
106+
display: inline-block;
107+
}
108+
109+
.logo {
110+
height: $navbarHeight - 1.4rem;
111+
min-width: $navbarHeight - 1.4rem;
112+
margin-right: 0.5rem;
113+
vertical-align: top;
114+
}
115+
116+
.site-name {
117+
font-size: 1.3rem;
118+
font-weight: 500;
119+
color: $textColor;
120+
position: relative;
121+
}
122+
123+
.links {
124+
padding-left: 1.5rem;
125+
box-sizing: border-box;
126+
background-color: white;
127+
white-space: nowrap;
128+
font-size: 0.9rem;
129+
position: absolute;
130+
right: $navbar-horizontal-padding;
131+
top: $navbar-vertical-padding;
132+
display: flex;
133+
134+
.search-box {
135+
flex: 0 0 auto;
136+
vertical-align: top;
137+
}
138+
}
139+
}
140+
141+
@media (max-width: $MQMobile) {
142+
.navbar {
143+
padding-left: 4rem;
144+
145+
.can-hide {
146+
display: none;
147+
}
148+
149+
.links {
150+
padding-left: 1.5rem;
151+
}
152+
153+
.site-name {
154+
width: calc(100vw - 9.4rem);
155+
overflow: hidden;
156+
white-space: nowrap;
157+
text-overflow: ellipsis;
158+
}
159+
}
160+
}
140161
</style>

‎src/.vuepress/theme/styles/code.styl

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,20 +17,22 @@
1717
line-height 1.4
1818
padding 1.25rem 1.5rem
1919
margin 0.85rem 0
20-
background-color $codeBgColor
20+
background-color #f6f6f6
2121
border-radius 6px
2222
overflow auto
2323
code
24-
color #fff
24+
color #3a385d
2525
padding 0
2626
background-color transparent
2727
border-radius 0
2828

2929
div[class*="language-"]
3030
position relative
31-
background-color $codeBgColor
31+
background-color #f6f6f6
3232
border-radius 6px
3333
.highlight-lines
34+
background-color #f6f6f6
35+
color #3a385d
3436
user-select none
3537
padding-top 1.3rem
3638
position absolute
@@ -39,7 +41,7 @@ div[class*="language-"]
3941
width 100%
4042
line-height 1.4
4143
.highlighted
42-
background-color rgba(0, 0, 0, 66%)
44+
background-color rgba(255, 255, 255, 90%)
4345
pre, pre[class*="language-"]
4446
background transparent
4547
position relative
@@ -50,7 +52,7 @@ div[class*="language-"]
5052
top 0.8em
5153
right 1em
5254
font-size 0.75rem
53-
color rgba(255, 255, 255, 0.4)
55+
color rgb(0 0 6 / 0.5)
5456
&:not(.line-numbers-mode)
5557
.line-numbers-wrapper
5658
display none
@@ -66,7 +68,7 @@ div[class*="language-"]
6668
display block
6769
width $lineNumbersWrapperWidth
6870
height 100%
69-
background-color rgba(0, 0, 0, 66%)
71+
background-color rgba(255, 255, 255, 95%)
7072
pre
7173
padding-left $lineNumbersWrapperWidth + 1 rem
7274
vertical-align middle
@@ -138,4 +140,33 @@ div.reactivecontent
138140
width 1000px
139141
margin-left -100px
140142

141-
@import '~prismjs/themes/prism-tomorrow.css'
143+
// @import '~prismjs/themes/prism-tomorrow.css'
144+
145+
.token.punctuation
146+
color #a8a9cc
147+
148+
.token.tag, .token.attr-name, .token.namespace, .token.deleted
149+
color #b2085f
150+
151+
.token.string, .token.char, .token.attr-value, .token.regex, .token.variable
152+
color #0a7a34
153+
154+
.token.selector, .token.important, .token.atrule, .token.keyword, .token.builtin
155+
color #b92dbc
156+
157+
.token.boolean, .token.number, .token.function
158+
color #c25205
159+
160+
.token.property, .token.class-name, .token.constant, .token.symbol
161+
color #717c11
162+
163+
.token.operator, .token.entity, .token.url
164+
color #0b7e7d
165+
166+
.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata
167+
color #848486
168+
169+
div[class*=language-].line-numbers-mode .line-numbers-wrapper, div[class*=language-].line-numbers-mode:after
170+
background-color #f6f6f6
171+
color #c4c4c6
172+
border-right 1px solid #e7e6e6

‎src/.vuepress/theme/styles/index.styl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ ul, ol
107107
padding-left 1.2em
108108

109109
strong
110-
font-weight 600
110+
font-weight 500
111111

112112
h1, h2, h3, h4, h5, h6
113113
font-weight 500
@@ -135,7 +135,7 @@ h1, h2, h3, h4, h5, h6
135135

136136
h1
137137
font-size 2.2rem
138-
font-weight 600
138+
font-weight 500
139139

140140
h2
141141
font-size 1.65rem

0 commit comments

Comments
 (0)