Skip to content

Commit d0ef06f

Browse files
committedMay 11, 2018
fix: code looks not good at small sreen (close: #350)
1 parent 546bded commit d0ef06f

File tree

3 files changed

+35
-31
lines changed

3 files changed

+35
-31
lines changed
 

‎lib/default-theme/styles/code.styl

+31-27
Original file line numberDiff line numberDiff line change
@@ -11,79 +11,83 @@
1111

1212
.content
1313
pre, pre[class*="language-"]
14-
background-color $codeBgColor
1514
line-height 1.4
16-
border-radius 6px
1715
padding 1.25rem 1.5rem
1816
margin 0.85rem 0
19-
white-space pre-wrap
20-
word-break break-word
17+
background transparent
2118
overflow auto
22-
position relative
2319
code
2420
color #fff
2521
padding 0
2622
background-color transparent
2723
border-radius 0
28-
&:before
29-
position absolute
30-
top 0.8em
31-
right 1em
32-
font-size 0.75rem
33-
color rgba(255, 255, 255, 0.4)
3424
.highlighted-line
3525
background-color rgba(0, 0, 0, 66%)
3626
display block
3727
margin 0 -1.5rem
3828
padding 0 1.5rem
3929

40-
pre[class="language-js"], pre[class="language-javascript"]
30+
div[class*="language-"]
31+
position relative
32+
background-color $codeBgColor
33+
border-radius 6px
34+
&::before
35+
position absolute
36+
top 0.8em
37+
right 1em
38+
font-size 0.75rem
39+
color rgba(255, 255, 255, 0.4)
40+
41+
div[class="language-js"], div[class="language-javascript"]
4142
&:before
4243
content "js"
4344

44-
pre[class="language-html"], pre[class="language-markup"]
45+
div[class="language-html"], div[class="language-markup"]
4546
&:before
4647
content "html"
4748

48-
pre[class="language-markdown"], pre[class="language-md"]
49+
div[class="language-markdown"], div[class="language-md"]
4950
&:before
5051
content "md"
5152

52-
pre[class="language-vue"]:before
53+
div[class="language-vue"]:before
5354
content "vue"
5455

55-
pre[class="language-css"]:before
56+
div[class="language-css"]:before
5657
content "css"
5758

58-
pre[class="language-sass"]:before
59+
div[class="language-sass"]:before
5960
content "sass"
6061

61-
pre[class="language-less"]:before
62+
div[class="language-less"]:before
6263
content "less"
6364

64-
pre[class="language-scss"]:before
65+
div[class="language-scss"]:before
6566
content "scss"
6667

67-
pre[class="language-stylus"]:before
68+
div[class="language-stylus"]:before
6869
content "stylus"
6970

70-
pre[class="language-json"]:before
71+
div[class="language-json"]:before
7172
content "json"
7273

73-
pre[class="language-ruby"]:before
74+
div[class="language-ruby"]:before
7475
content "rb"
7576

76-
pre[class="language-python"]:before
77+
div[class="language-python"]:before
7778
content "py"
7879

79-
pre[class="language-go"]:before
80+
div[class="language-go"]:before
8081
content "go"
8182

82-
pre[class="language-java"]:before
83+
div[class="language-java"]:before
8384
content "java"
8485

85-
pre[class="language-c"]:before
86+
div[class="language-c"]:before
8687
content "c"
8788

88-
pre[class="language-bash"]:before
89+
div[class="language-bash"]:before
90+
content "sh"
91+
92+
div[class="language-yaml"]:before
8993
content "sh"

‎lib/default-theme/styles/mobile.styl

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,6 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
3636
.content:not(.custom)
3737
padding 1.5rem
3838
.content
39-
pre, pre[class*="language-"]
39+
div[class*="language-"]
4040
margin 0.85rem -1.5rem
4141
border-radius 0

‎lib/markdown/highlightLines.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ module.exports = md => {
88
md.renderer.rules.fence = (...args) => {
99
const [tokens, idx, options] = args
1010
const token = tokens[idx]
11+
const langName = token.info.replace(RE, '').trim()
1112

1213
if (!token.info || !RE.test(token.info)) {
13-
return fence(...args)
14+
return `<div class="language-${langName}">${fence(...args)}</div>`
1415
}
1516

16-
const langName = token.info.replace(RE, '').trim()
1717
const lineNumbers = RE.exec(token.info)[1]
1818
.split(',')
1919
.map(v => v.split('-').map(v => parseInt(v, 10)))
@@ -51,6 +51,6 @@ module.exports = md => {
5151
highlightedCode += `${split.code}\n`
5252
}
5353
})
54-
return highlightedCode
54+
return `<div class="language-${langName}">${highlightedCode}</div>`
5555
}
5656
}

4 commit comments

Comments
 (4)

meteorlxy commented on May 12, 2018

@meteorlxy
Member

It'll cause some issues in docs

ulivz commented on May 12, 2018

@ulivz
MemberAuthor

screenshot_2018-05-12-13-36-11-171_qq

meteorlxy commented on May 12, 2018

@meteorlxy
Member

@ulivz I find that issues are about the docs, so modified.

meteorlxy commented on May 12, 2018

@meteorlxy
Member
Please sign in to comment.