support highlighting lines

Author: yyx990803

docs/kitchen/sink.md

@@ -14,7 +14,7 @@ bar: 234
 const a = 123
 ```
 
-``` html
+``` html{2,10}
 <div id="example">
   <p>Original message: "{{ message }}"</p>
   <p>Computed reversed message: "{{ reversedMessage }}"</p>
@@ -37,10 +37,6 @@ var vm = new Vue({
 </script>
 ```
 
-## Dynamic Component
-
-<demo-1 vue></demo-1>
-
 ## Interpolation
 
 - Foo is {{ $page.frontmatter.foo }}

docs/markdown.md

@@ -11,3 +11,7 @@
 ## Custom Containers
 
 ## Configuration
+
+## Syntax Highlighting
+
+Highlight lines

lib/default-theme/Layout.vue

@@ -35,20 +35,4 @@ export default {
 </script>
 
 <style src="prismjs/themes/prism-tomorrow.css"></style>
-<style src="./nprogress.css"></style>
-<style>
-.theme-container {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-}
-
-pre[class*="language-"] {
-  line-height: 1.4;
-  border-radius: 5px;
-}
-
-pre[class*="language-"] code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-  font-size: 14px;
-  -webkit-font-smoothing: antialiased;
-}
-</style>
+<style src="./styles.css"></style>

lib/default-theme/styles.css

@@ -0,0 +1,106 @@
+.theme-container {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+pre, pre[class*="language-"] {
+  background-color: #2d2d2d;
+  color: white;
+  line-height: 1.4;
+  border-radius: 5px;
+  padding: 1.25rem 1.575rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow: auto;
+}
+
+pre code, pre[class*="language-"] code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+}
+
+.highlighted-line {
+  background-color: #14161a;
+  display: block;
+  margin: 1px -1.575rem;
+  padding: 1px 1.575rem;
+}
+
+/*
+  Copied from nprogress since it doens't
+  allow programmatic configuration of color
+*/
+
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #41b883;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #41b883, 0 0 5px #41b883;
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+      -ms-transform: rotate(3deg) translate(0px, -4px);
+          transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: #41b883;
+  border-left-color: #41b883;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+          animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0%   { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

lib/markdown/highlight.js

@@ -14,7 +14,7 @@ module.exports = (str, lang) => {
   }
   if (prism.languages[lang]) {
     const res = prism.highlight(str, prism.languages[lang], lang)
-    return `<pre class="language-${lang}"><code v-pre>${res}</code></pre>`
+    return `<pre v-pre class="language-${lang}"><code>${res}</code></pre>`
   }
   return ''
 }

lib/markdown/highlightLines.js

@@ -0,0 +1,56 @@
+// forked from https://github.com/egoist/markdown-it-highlight-lines
+
+const RE = /{([\d,-]+)}/
+const wrapperRE = /^<pre .*?><code>/
+
+module.exports = md => {
+  const fence = md.renderer.rules.fence
+  md.renderer.rules.fence = (...args) => {
+    const [tokens, idx, options] = args
+    const token = tokens[idx]
+
+    if (!token.info || !RE.test(token.info)) {
+      return fence(...args)
+    }
+
+    const langName = token.info.replace(RE, '').trim()
+    const lineNumbers = RE.exec(token.info)[1]
+      .split(',')
+      .map(v => v.split('-').map(v => parseInt(v, 10)))
+
+    const code = options.highlight
+      ? options.highlight(token.content, langName)
+      : token.content
+
+    const rawCode = code.replace(wrapperRE, '')
+    const leadingWrapper = code.match(wrapperRE)[0]
+
+    const codeSplits = rawCode.split('\n').map((split, index) => {
+      const lineNumber = index + 1
+      const inRange = lineNumbers.some(([start, end]) => {
+        if (start && end) {
+          return lineNumber >= start && lineNumber <= end
+        }
+        return lineNumber === start
+      })
+      if (inRange) {
+        return {
+          code: `<span class="highlighted-line">${split}</span>`,
+          highlighted: true
+        }
+      }
+      return {
+        code: split
+      }
+    })
+    let highlightedCode = leadingWrapper
+    codeSplits.forEach(split => {
+      if (split.highlighted) {
+        highlightedCode += split.code
+      } else {
+        highlightedCode += `${split.code}\n`
+      }
+    })
+    return highlightedCode
+  }
+}

lib/markdown/index.js

@@ -1,4 +1,5 @@
 const highlight = require('./highlight')
+const highlightLines = require('./highlightLines')
 const convertRouterLink = require('./link')
 const anchor = require('markdown-it-anchor')
 const container = require('markdown-it-container')
@@ -15,6 +16,7 @@ module.exports = ({ markdown = {}}) => {
     highlight
   })
     .use(convertRouterLink)
+    .use(highlightLines)
     .use(anchor, Object.assign({ permalink: true, permalinkBefore: true }, markdown.anchor))
     .use(toc, Object.assign({ includeLevel: [2, 3] }, markdown.toc))
     .use(container, 'tip')

lib/webpack/baseConfig.js

@@ -7,7 +7,7 @@ module.exports = function createBaseConfig ({
   publicPath,
   themePath,
   notFoundPath
-}, { debug }) {
+}, { debug } = {}) {
   const markdown = require('../markdown')(siteConfig)
   const Config = require('webpack-chain')
   const { VueLoaderPlugin } = require('vue-loader')