From dd8029b05af451fa8a4cac5aae98dafe05c238f7 Mon Sep 17 00:00:00 2001 From: wangyi7099 <724003548@qq.com> Date: Sun, 25 Aug 2019 08:29:32 +0800 Subject: [PATCH] feat(antdsite): add highlight line number and show line number of markdown extensions. --- packages/antdsite/gatsby-browser.js | 1 + packages/antdsite/gatsby-config.js | 7 +- .../default-theme/assets/custom-md-block.less | 9 -- .../src/default-theme/assets/highlight.less | 34 +++---- .../src/default-theme/assets/index.less | 2 +- .../assets/markdown-extension.less | 60 +++++++++++++ packages/docs/docs/guide/markdown.md | 88 ++++++++++++++++++ packages/docs/docs/zh/guide/markdown.md | 90 ++++++++++++++++++- 8 files changed, 262 insertions(+), 29 deletions(-) delete mode 100644 packages/antdsite/src/default-theme/assets/custom-md-block.less create mode 100644 packages/antdsite/src/default-theme/assets/markdown-extension.less diff --git a/packages/antdsite/gatsby-browser.js b/packages/antdsite/gatsby-browser.js index f5375ac..e960e44 100644 --- a/packages/antdsite/gatsby-browser.js +++ b/packages/antdsite/gatsby-browser.js @@ -1,4 +1,5 @@ import NProgress from 'nprogress'; +require('prismjs/plugins/line-numbers/prism-line-numbers.css'); export const onClientEntry = () => { // Merge default options with user defined options in `gatsby-config.js` diff --git a/packages/antdsite/gatsby-config.js b/packages/antdsite/gatsby-config.js index a457fe6..d983c86 100644 --- a/packages/antdsite/gatsby-config.js +++ b/packages/antdsite/gatsby-config.js @@ -24,7 +24,12 @@ module.exports = { { resolve: getPlugin('remark-default-class-name') }, - 'gatsby-remark-prismjs', + { + resolve: 'gatsby-remark-prismjs', + options: { + inlineCodeMarker: '>>>' + } + }, { resolve: getPlugin('gatsby-remark-custom-blocks'), pluginOptions: finalConfig.markdown.alert diff --git a/packages/antdsite/src/default-theme/assets/custom-md-block.less b/packages/antdsite/src/default-theme/assets/custom-md-block.less deleted file mode 100644 index cb4b57a..0000000 --- a/packages/antdsite/src/default-theme/assets/custom-md-block.less +++ /dev/null @@ -1,9 +0,0 @@ -.md-alert.ant-alert { - .ant-alert-description { - p { - margin: 0.3rem 0; - } - } - - margin-bottom: 16px; -} diff --git a/packages/antdsite/src/default-theme/assets/highlight.less b/packages/antdsite/src/default-theme/assets/highlight.less index ba03051..a547756 100644 --- a/packages/antdsite/src/default-theme/assets/highlight.less +++ b/packages/antdsite/src/default-theme/assets/highlight.less @@ -139,68 +139,68 @@ pre[class*='language-'] { top: 0.25rem; } -.gatsby-highlight pre[class='language-javascript']::before { +.gatsby-highlight pre[class*='language-javascript']::before { content: 'js'; } -.gatsby-highlight pre[class='language-js']::before { +.gatsby-highlight pre[class*='language-js']::before { content: 'js'; } -.gatsby-highlight pre[class='language-jsx']::before { +.gatsby-highlight pre[class*='language-jsx']::before { content: 'jsx'; } -.gatsby-highlight pre[class='language-graphql']::before { +.gatsby-highlight pre[class*='language-graphql']::before { content: 'GraphQL'; } -.gatsby-highlight pre[class='language-html']::before { +.gatsby-highlight pre[class*='language-html']::before { content: 'html'; } -.gatsby-highlight pre[class='language-css']::before { +.gatsby-highlight pre[class*='language-css']::before { content: 'css'; } -.gatsby-highlight pre[class='language-mdx']::before { +.gatsby-highlight pre[class*='language-mdx']::before { content: 'mdx'; font-weight: 400; } -.gatsby-highlight pre[class='language-shell']::before { +.gatsby-highlight pre[class*='language-shell']::before { content: 'shell'; } -.gatsby-highlight pre[class='language-sh']::before { +.gatsby-highlight pre[class*='language-sh']::before { content: 'sh'; } -.gatsby-highlight pre[class='language-bash']::before { +.gatsby-highlight pre[class*='language-bash']::before { content: 'bash'; } -.gatsby-highlight pre[class='language-yaml']::before { +.gatsby-highlight pre[class*='language-yaml']::before { content: 'yaml'; } -.gatsby-highlight pre[class='language-markdown']::before { +.gatsby-highlight pre[class*='language-markdown']::before { content: 'md'; } -.gatsby-highlight pre[class='language-json']::before, -.gatsby-highlight pre[class='language-json5']::before { +.gatsby-highlight pre[class*='language-json']::before, +.gatsby-highlight pre[class*='language-json5']::before { content: 'json'; } -.gatsby-highlight pre[class='language-diff']::before { +.gatsby-highlight pre[class*='language-diff']::before { content: 'diff'; } -.gatsby-highlight pre[class='language-text']::before { +.gatsby-highlight pre[class*='language-text']::before { content: 'text'; } -.gatsby-highlight pre[class='language-flow']::before { +.gatsby-highlight pre[class*='language-flow']::before { content: 'flow'; } diff --git a/packages/antdsite/src/default-theme/assets/index.less b/packages/antdsite/src/default-theme/assets/index.less index 1de4a1b..496f087 100644 --- a/packages/antdsite/src/default-theme/assets/index.less +++ b/packages/antdsite/src/default-theme/assets/index.less @@ -22,4 +22,4 @@ @import './docsearch'; @import './page-scrollbar'; @import './search-box'; -@import './custom-md-block'; +@import './markdown-extension'; diff --git a/packages/antdsite/src/default-theme/assets/markdown-extension.less b/packages/antdsite/src/default-theme/assets/markdown-extension.less new file mode 100644 index 0000000..c9d582f --- /dev/null +++ b/packages/antdsite/src/default-theme/assets/markdown-extension.less @@ -0,0 +1,60 @@ +/** + * -------------------------------- + * Custom markdown block + * -------------------------------- + */ + +.md-alert.ant-alert { + .ant-alert-description { + p { + margin: 0.3rem 0; + } + } + + margin-bottom: 16px; +} + +/** + * -------------------------------- + * Highlight code line + * -------------------------------- + */ + +.gatsby-highlight-code-line { + background-color: rgba(0, 0, 0, 0.66); + display: block; + margin-right: -1em; + margin-left: -1em; + padding-right: 1em; + padding-left: 0.75em; +} + +/** + * -------------------------------- + * Line Numbers + * -------------------------------- + */ + +// Adjust the position of the line numbers +.gatsby-highlight pre[class*='language-'].line-numbers { + padding-left: 2.8em; +} + +// If you only want to use line numbering +.gatsby-highlight { + border-radius: 0.3em; +} +.gatsby-highlight pre[class*='language-'].line-numbers { + padding-left: 1.8em; + overflow: auto; +} +.line-numbers .line-numbers-rows { + border: none; +} +.line-numbers-rows > span:before { + padding-right: 0.4rem; + padding-left: 0.4rem; +} +.line-numbers .line-numbers-rows { + padding-top: 1em; +} diff --git a/packages/docs/docs/guide/markdown.md b/packages/docs/docs/guide/markdown.md index 57f6801..7be64be 100644 --- a/packages/docs/docs/guide/markdown.md +++ b/packages/docs/docs/guide/markdown.md @@ -51,3 +51,91 @@ This is a tip for custom title . **See also:** - [Markdown alert config](../config/#alert) + +## Line highlighting in the code block + +Enter: + +````markdown +```js{4} +Export default { +  Data() { +    Return { +      Msg: 'Highlighted!' +    }; +  } +}; +``` +```` + +Output: + +```js{4} +Export default { +  Data() { +    Return { +      Msg: 'Highlighted!' +    }; +  } +}; +``` + +**reference:** + +- [gatsby-remark-prismjs](https://www.npmjs.com/package/gatsby-remark-prismjs#line-highlighting) + +## Display line number + +Enter: + +````markdown +```javascript{numberLines:true}{4} +// In your gatsby-config.js +Plugins: [ + { + Resolve: `gatsby-transformer-remark`, + Options: { + Plugins: [`gatsby-remark-prismjs`] + } + } +]; +``` +```` + +Output: + +```javascript{numberLines:true}{4} +// In your gatsby-config.js +Plugins: [ + { + Resolve: `gatsby-transformer-remark`, + Options: { + Plugins: [`gatsby-remark-prismjs`] + } + } +]; +``` + +**reference:** + +- [gatsby-remark-prismjs](https://www.npmjs.com/package/gatsby-remark-prismjs#optional-add-line-numbering) + +## Highlight the code in the line + +Enter: + +```markdown +I can highlight this code with css syntax: `css>>>.some-class { background-color: red }` + +I can highlight this code with js syntax: `js>>>const foo = 'bar';` +``` + +Output: + +I can highlight this code with css syntax: `css>>>.some-class { background-color: red }` + +I can highlight this code with js syntax: `js>>>const foo = 'bar';` + +**reference:** + +- [gatsby-remark-prismjs](https://www.npmjs.com/package/gatsby-remark-prismjs#inline-code-blocks) diff --git a/packages/docs/docs/zh/guide/markdown.md b/packages/docs/docs/zh/guide/markdown.md index 4e7ac37..bfe2198 100644 --- a/packages/docs/docs/zh/guide/markdown.md +++ b/packages/docs/docs/zh/guide/markdown.md @@ -48,6 +48,94 @@ 这是一个自定义标题的提示 ::: -**具体配置参考:** +**也可以查看:** - [Markdown alert 配置项](../config/#alert) + +## 代码块中的行高亮 + +输入： + +````markdown +```js{4} +export default { + data() { + return { + msg: 'Highlighted!' + }; + } +}; +``` +```` + +输出： + +```js{4} +export default { + data() { + return { + msg: 'Highlighted!' + }; + } +}; +``` + +**参考：** + +- [gatsby-remark-prismjs](https://www.npmjs.com/package/gatsby-remark-prismjs#line-highlighting) + +## 显示行号 + +输入： + +````markdown +```javascript{numberLines:true}{4} +// In your gatsby-config.js +plugins: [ + { + resolve: `gatsby-transformer-remark`, + options: { + plugins: [`gatsby-remark-prismjs`] + } + } +]; +``` +```` + +输出： + +```javascript{numberLines:true}{4} +// In your gatsby-config.js +plugins: [ + { + resolve: `gatsby-transformer-remark`, + options: { + plugins: [`gatsby-remark-prismjs`] + } + } +]; +``` + +**参考：** + +- [gatsby-remark-prismjs](https://www.npmjs.com/package/gatsby-remark-prismjs#optional-add-line-numbering) + +## 高亮行内的代码 + +输入： + +```markdown +我可以用 css 语法高亮这段代码：`css>>>.some-class { background-color: red }` + +我可以用 js 语法高亮这段代码：`js>>>const foo = 'bar';` +``` + +输出： + +我可以用 css 语法高亮这段代码：`css>>>.some-class { background-color: red }` + +我可以用 js 语法高亮这段代码：`js>>>const foo = 'bar';` + +**参考：** + +- [gatsby-remark-prismjs](https://www.npmjs.com/package/gatsby-remark-prismjs#inline-code-blocks)