From cdc2ed4c3e535a0bc58ccdaf927dae48052fdfab Mon Sep 17 00:00:00 2001 From: EGOIST <0x142857@gmail.com> Date: Wed, 27 Mar 2019 22:35:24 +0800 Subject: [PATCH] fix: update default style for code block --- .../fence-options-plugin.test.js.snap | 3 --- .../highlight-plugin.test.js.snap | 3 +++ ...-options-plugin.js => highlight-plugin.js} | 18 +++---------- ...lugin.test.js => highlight-plugin.test.js} | 2 +- packages/saber/lib/renderer/app/create-app.js | 1 + .../app/css/saber-highlight.css} | 26 ++++++++++--------- website/pages/docs/markdown-features.md | 10 ++----- website/src/layouts/docs.vue | 1 - website/src/layouts/tutorial.vue | 1 - website/src/saber-browser.js | 1 + 10 files changed, 26 insertions(+), 40 deletions(-) delete mode 100644 packages/saber/lib/markdown/__snapshots__/fence-options-plugin.test.js.snap create mode 100644 packages/saber/lib/markdown/__snapshots__/highlight-plugin.test.js.snap rename packages/saber/lib/markdown/{fence-options-plugin.js => highlight-plugin.js} (83%) rename packages/saber/lib/markdown/{fence-options-plugin.test.js => highlight-plugin.test.js} (81%) rename packages/saber/lib/{markdown/fence-options.css => renderer/app/css/saber-highlight.css} (69%) diff --git a/packages/saber/lib/markdown/__snapshots__/fence-options-plugin.test.js.snap b/packages/saber/lib/markdown/__snapshots__/fence-options-plugin.test.js.snap deleted file mode 100644 index d858d7691..000000000 --- a/packages/saber/lib/markdown/__snapshots__/fence-options-plugin.test.js.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`main 1`] = `"
<div>hehe</div>
"`; diff --git a/packages/saber/lib/markdown/__snapshots__/highlight-plugin.test.js.snap b/packages/saber/lib/markdown/__snapshots__/highlight-plugin.test.js.snap new file mode 100644 index 000000000..7418952ea --- /dev/null +++ b/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>hehe</div>
"`; diff --git a/packages/saber/lib/markdown/fence-options-plugin.js b/packages/saber/lib/markdown/highlight-plugin.js similarity index 83% rename from packages/saber/lib/markdown/fence-options-plugin.js rename to packages/saber/lib/markdown/highlight-plugin.js index c5905e818..6cfe27c95 100644 --- a/packages/saber/lib/markdown/fence-options-plugin.js +++ b/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 } = {}) => { `${codeMask}${code.trim()}` md.renderer.rules.fence = (...args) => { - const [tokens, idx, options, env, self] = args + const [tokens, idx, options, , self] = args const token = tokens[idx] - const fenceOptionsCSS = `` - 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 = - `
` + + `
` + md.utils .escapeHtml(token.content) .split('\n') diff --git a/packages/saber/lib/markdown/fence-options-plugin.test.js b/packages/saber/lib/markdown/highlight-plugin.test.js similarity index 81% rename from packages/saber/lib/markdown/fence-options-plugin.test.js rename to packages/saber/lib/markdown/highlight-plugin.test.js index 1ae18f29f..d24e477c0 100644 --- a/packages/saber/lib/markdown/fence-options-plugin.test.js +++ b/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() diff --git a/packages/saber/lib/renderer/app/create-app.js b/packages/saber/lib/renderer/app/create-app.js index fbcd97a45..092e428cc 100644 --- a/packages/saber/lib/renderer/app/create-app.js +++ b/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' diff --git a/packages/saber/lib/markdown/fence-options.css b/packages/saber/lib/renderer/app/css/saber-highlight.css similarity index 69% rename from packages/saber/lib/markdown/fence-options.css rename to packages/saber/lib/renderer/app/css/saber-highlight.css index ef8803ba1..3e4c588ca 100644 --- a/packages/saber/lib/markdown/fence-options.css +++ b/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; +} diff --git a/website/pages/docs/markdown-features.md b/website/pages/docs/markdown-features.md index f23a4800c..e7e1ea74a 100644 --- a/website/pages/docs/markdown-features.md +++ b/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 - +import 'prismjs/themes/prism.css' ``` ### Line Highlighting in Code Blocks diff --git a/website/src/layouts/docs.vue b/website/src/layouts/docs.vue index 1a3f323b5..f006633a9 100644 --- a/website/src/layouts/docs.vue +++ b/website/src/layouts/docs.vue @@ -36,5 +36,4 @@ export default { } - diff --git a/website/src/layouts/tutorial.vue b/website/src/layouts/tutorial.vue index cf09f1b37..efb00a7a8 100644 --- a/website/src/layouts/tutorial.vue +++ b/website/src/layouts/tutorial.vue @@ -57,5 +57,4 @@ export default { } - diff --git a/website/src/saber-browser.js b/website/src/saber-browser.js index 5d0397672..bb65b70d9 100644 --- a/website/src/saber-browser.js +++ b/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 }) => {