fix: update default style for code block

packages/saber/lib/markdown/__snapshots__/highlight-plugin.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`main 1`] = `"<div class=\\"saber-highlight\\" v-pre=\\"\\" data-lang=\\"vue\\"><pre class=\\"saber-highlight-code language-vue\\"><code class=\\"language-vue\\">&lt;div&gt;hehe&lt;/div&gt;</code></pre></div>"`;

packages/saber/lib/markdown/fence-options-plugin.js → packages/saber/lib/markdown/highlight-plugin.js

@@ -1,5 +1,3 @@
-const path = require('path')
-
 const RE = /\s*{([^}]+)}/
 
 const parseOptions = str => {
@@ -19,17 +17,9 @@ module.exports = (md, { highlightedLineBackground } = {}) => {
     `<div${preWrapperAttrs}>${codeMask}<pre${preAttrs}><code${codeAttrs}>${code.trim()}</code></pre></div>`
 
   md.renderer.rules.fence = (...args) => {
-    const [tokens, idx, options, env, self] = args
+    const [tokens, idx, options, , self] = args
     const token = tokens[idx]
 
-    const fenceOptionsCSS = `<style src="${path.join(
-      __dirname,
-      'fence-options.css'
-    )}"></style>`
-    if (!env.hoistedTags.includes(fenceOptionsCSS)) {
-      env.hoistedTags.push(fenceOptionsCSS)
-    }
-
     const langName = token.info.replace(RE, '').trim()
 
     const code = options.highlight
@@ -41,14 +31,14 @@ module.exports = (md, { highlightedLineBackground } = {}) => {
     const langClass = langName ? `language-${langName}` : ''
     const preAttrs = renderAttrs([
       ...(token.attrs || []),
-      ['class', ['code-block', langClass].filter(Boolean).join(' ')]
+      ['class', ['saber-highlight-code', langClass].filter(Boolean).join(' ')]
     ])
     const codeAttrs = renderAttrs([
       ...(token.attrs || []),
       ['class', langClass]
     ])
     const preWrapperAttrs = renderAttrs([
-      ['class', 'code-wrapper'],
+      ['class', 'saber-highlight'],
       ['v-pre', ''],
       ['data-lang', langName]
     ])
@@ -66,7 +56,7 @@ module.exports = (md, { highlightedLineBackground } = {}) => {
     token.info = langName
 
     const codeMask =
-      `<div class="code-mask${langClass ? ` ${langClass}` : ''}">` +
+      `<div class="saber-highlight-mask${langClass ? ` ${langClass}` : ''}">` +
       md.utils
         .escapeHtml(token.content)
         .split('\n')

packages/saber/lib/markdown/fence-options-plugin.test.js → packages/saber/lib/markdown/highlight-plugin.test.js

@@ -1,5 +1,5 @@
 const Markdown = require('saber-markdown')
-const fenceOptionsPlugin = require('./fence-options-plugin')
+const fenceOptionsPlugin = require('./highlight-plugin')
 
 test('main', () => {
   const md = new Markdown()

packages/saber/lib/renderer/app/create-app.js

@@ -1,4 +1,5 @@
 import './polyfills'
+import './css/saber-highlight.css'
 import { join, dirname } from 'path'
 import Vue from 'vue'
 import routes from '#cache/routes'

packages/saber/lib/markdown/fence-options.css → packages/saber/lib/renderer/app/css/saber-highlight.css

@@ -1,25 +1,22 @@
-.code-wrapper {
+.saber-highlight {
   position: relative;
   margin: 2rem 0;
-  background-color: #282c34;
-  border-radius: 4px;
   overflow: hidden;
+  background: #fdfaf6;
+  box-shadow: inset 0 0 0 1px #faede5;
+  border-radius: 4px;
 }
 
-.code-line.highlighted {
-  background-color: #000;
-}
-
-.code-wrapper:before {
+.saber-highlight:before {
   content: attr(data-lang);
   position: absolute;
   right: 10px;
   top: 5px;
   font-size: .75rem;
-  color: rgba(255, 255, 255, 0.4);
+  color: #cacaca;
 }
 
-.code-mask, .code-block {
+.saber-highlight-mask, .saber-highlight-code {
   line-height: 1.5;
   background-color: transparent !important;
   text-shadow: none !important;
@@ -29,7 +26,7 @@
   white-space: pre;
 }
 
-.code-mask {
+.saber-highlight-mask {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -41,7 +38,12 @@
   padding-right: 0 !important;
 }
 
-.code-block {
+.saber-highlight-code {
   position: relative;
   z-index: 2;
 }
+
+.code-line.highlighted {
+  background: #faede5;
+  box-shadow: inset 2px 0 0 0 #f1beb6;
+}

website/pages/docs/markdown-features.md

@@ -116,17 +116,11 @@ try {
 }
 ```
 
-You also need to include a Prism theme in your app to make it display properly, we recommend `prism-tomorrow.css`:
+You also need to include a Prism theme in your app to make it display properly, we recommend `prism.css`:
 
 ```js
 // saber-browser.js
-import 'prismjs/themes/prism-tomorrow.css'
-```
-
-Or in a specific layout component:
-
-```vue
-<style src="prismjs/themes/prism-tomorrow.css"></style>
+import 'prismjs/themes/prism.css'
 ```
 
 ### Line Highlighting in Code Blocks

website/src/layouts/docs.vue

@@ -36,5 +36,4 @@ export default {
 }
 </script>
 
-<style src="prismjs/themes/prism-tomorrow.css"></style>
 <style scoped src="../css/page.css"></style>

website/src/layouts/tutorial.vue

@@ -57,5 +57,4 @@ export default {
 }
 </script>
 
-<style src="prismjs/themes/prism-tomorrow.css"></style>
 <style scoped src="../css/page.css"></style>

website/src/saber-browser.js

@@ -1,4 +1,5 @@
 import 'nprogress/nprogress.css'
+import 'prismjs/themes/prism.css'
 import './css/global.css'
 
 export default ({ router, rootOptions }) => {