From e9d1e4cc89b63370bf52b9fbec1fe23c85606294 Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Tue, 29 Oct 2019 01:43:01 +0800 Subject: [PATCH 1/4] docs(v2): code block line highlighting --- .../src/theme/CodeBlock/index.js | 3 +- .../src/theme/CodeBlock/index.js | 2 +- website/docs/advanced-themes.md | 7 +- website/docs/blog.md | 4 +- website/docs/configuration.md | 6 +- website/docs/deployment.md | 4 +- website/docs/docusaurus-core.md | 12 +-- website/docs/lifecycle-apis.md | 6 +- website/docs/markdown-features.mdx | 85 ++++++++++++++++--- website/docs/migrating-from-v1-to-v2.md | 45 ++++++---- website/docs/presets.md | 9 +- website/docs/search.md | 2 +- website/docs/sidebar.md | 6 +- website/docs/styling-layout.md | 8 +- website/docs/using-plugins.md | 9 +- website/docs/using-themes.md | 5 +- website/src/css/custom.css | 7 ++ 17 files changed, 152 insertions(+), 68 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js index 1703b57b484c..044710053c8a 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js @@ -31,6 +31,7 @@ export default ({children, className: languageClassName, metastring}) => { const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1]; highlightLines = rangeParser.parse(highlightLinesRange).filter(n => n > 0); } + useEffect(() => { let clipboard; @@ -73,7 +74,7 @@ export default ({children, className: languageClassName, metastring}) => { const lineProps = getLineProps({line, key: i}); if (highlightLines.includes(i + 1)) { - lineProps.className = `${lineProps.className} highlight-line`; + lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`; } return ( diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js index 93b2c083bfc9..097801fb0549 100644 --- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js +++ b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js @@ -92,7 +92,7 @@ export default ({ const lineProps = getLineProps({line, key: i}); if (highlightLines.includes(i + 1)) { - lineProps.className = `${lineProps.className} highlight-line`; + lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`; } return ( diff --git a/website/docs/advanced-themes.md b/website/docs/advanced-themes.md index fe5f555c66aa..eeef0bb49288 100644 --- a/website/docs/advanced-themes.md +++ b/website/docs/advanced-themes.md @@ -19,10 +19,10 @@ To summarize: ## Writing customized Docusaurus themes -A Docusaurus theme normally includes an `index.js` file where you hook up to the lifecycle methods, alongside with a `theme/` directory of components. A typical Docusaurus theme folder looks like this: +A Docusaurus theme normally includes an `index.js` file where you hook up to the lifecycle methods, alongside with a `theme/` directory of components. A typical Docusaurus `theme` folder looks like this: -```shell -. +```shell {5-7} +website ├── package.json └── src ├── index.js @@ -32,6 +32,7 @@ A Docusaurus theme normally includes an `index.js` file where you hook up to the ``` There are two lifecycle methods that are essential to theme implementation: + - [getThemePath](lifecycle-apis.md#getthemepath) - [getClientModules](lifecycle-apis.md#getclientmodules) diff --git a/website/docs/blog.md b/website/docs/blog.md index 7d37f8bab40d..e211b9b02862 100644 --- a/website/docs/blog.md +++ b/website/docs/blog.md @@ -56,7 +56,7 @@ The only required field is `title`; however, we provide options to add author in Use the `` marker in your blog post to represent what will be shown as the summary when viewing all published blog posts. Anything above `` will be part of the summary. For example: -```md +```md {9} --- title: Truncation Example --- @@ -82,7 +82,7 @@ You can run your Docusaurus 2 site without a landing page and instead have your **Note:** Make sure there's no `index.js` page in `src/pages` or else there will be two files mapping to the same route! -```js +```js {10} // docusaurus.config.js module.exports = { // ... diff --git a/website/docs/configuration.md b/website/docs/configuration.md index 48b4ca0a2e4a..d58bfc3226ca 100644 --- a/website/docs/configuration.md +++ b/website/docs/configuration.md @@ -36,8 +36,6 @@ It is recommended to check the [deployment docs](deployment.md) for more informa ### Themes, Plugins, and Presets configurations - - _This section is a work in progress. [Welcoming PRs](https://github.com/facebook/docusaurus/issues/1640)._