fix: code looks not good at small sreen (close: #350)

vuejs · May 11, 2018 · d0ef06f · d0ef06f · meteorlxy · May 12, 2018
1 parent 546bded
commit d0ef06f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 31 deletions.
diff --git a/lib/default-theme/styles/code.styl b/lib/default-theme/styles/code.styl
@@ -11,79 +11,83 @@
 
 .content
   pre, pre[class*="language-"]
-    background-color $codeBgColor
     line-height 1.4
-    border-radius 6px
     padding 1.25rem 1.5rem
     margin 0.85rem 0
-    white-space pre-wrap
-    word-break break-word
+    background transparent
     overflow auto
-    position relative
     code
       color #fff
       padding 0
       background-color transparent
       border-radius 0
-    &:before
-      position absolute
-      top 0.8em
-      right 1em
-      font-size 0.75rem
-      color rgba(255, 255, 255, 0.4)
   .highlighted-line
     background-color rgba(0, 0, 0, 66%)
     display block
     margin 0 -1.5rem
     padding 0 1.5rem
 
-pre[class="language-js"], pre[class="language-javascript"]
+div[class*="language-"]
+  position relative
+  background-color $codeBgColor
+  border-radius 6px
+  &::before
+    position absolute
+    top 0.8em
+    right 1em
+    font-size 0.75rem
+    color rgba(255, 255, 255, 0.4)
+
+div[class="language-js"], div[class="language-javascript"]
   &:before
     content "js"
 
-pre[class="language-html"], pre[class="language-markup"]
+div[class="language-html"], div[class="language-markup"]
   &:before
     content "html"
 
-pre[class="language-markdown"], pre[class="language-md"]
+div[class="language-markdown"], div[class="language-md"]
   &:before
     content "md"
 
-pre[class="language-vue"]:before
+div[class="language-vue"]:before
   content "vue"
 
-pre[class="language-css"]:before
+div[class="language-css"]:before
   content "css"
 
-pre[class="language-sass"]:before
+div[class="language-sass"]:before
   content "sass"
 
-pre[class="language-less"]:before
+div[class="language-less"]:before
   content "less"
 
-pre[class="language-scss"]:before
+div[class="language-scss"]:before
   content "scss"
 
-pre[class="language-stylus"]:before
+div[class="language-stylus"]:before
   content "stylus"
 
-pre[class="language-json"]:before
+div[class="language-json"]:before
   content "json"
 
-pre[class="language-ruby"]:before
+div[class="language-ruby"]:before
   content "rb"
 
-pre[class="language-python"]:before
+div[class="language-python"]:before
   content "py"
 
-pre[class="language-go"]:before
+div[class="language-go"]:before
   content "go"
 
-pre[class="language-java"]:before
+div[class="language-java"]:before
   content "java"
 
-pre[class="language-c"]:before
+div[class="language-c"]:before
   content "c"
 
-pre[class="language-bash"]:before
+div[class="language-bash"]:before
+  content "sh"
+
+div[class="language-yaml"]:before
   content "sh"
diff --git a/lib/default-theme/styles/mobile.styl b/lib/default-theme/styles/mobile.styl
@@ -36,6 +36,6 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
   .content:not(.custom)
     padding 1.5rem
   .content
-    pre, pre[class*="language-"]
+    div[class*="language-"]
       margin 0.85rem -1.5rem
       border-radius 0
diff --git a/lib/markdown/highlightLines.js b/lib/markdown/highlightLines.js
@@ -8,12 +8,12 @@ module.exports = md => {
   md.renderer.rules.fence = (...args) => {
     const [tokens, idx, options] = args
     const token = tokens[idx]
+    const langName = token.info.replace(RE, '').trim()
 
     if (!token.info || !RE.test(token.info)) {
-      return fence(...args)
+      return `<div class="language-${langName}">${fence(...args)}</div>`
     }
 
-    const langName = token.info.replace(RE, '').trim()
     const lineNumbers = RE.exec(token.info)[1]
       .split(',')
       .map(v => v.split('-').map(v => parseInt(v, 10)))
@@ -51,6 +51,6 @@ module.exports = md => {
         highlightedCode += `${split.code}\n`
       }
     })
-    return highlightedCode
+    return `<div class="language-${langName}">${highlightedCode}</div>`
   }
 }