From 9c69dfd240b49f3359f4ea8bf7964ec9b4936ed8 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 28 Oct 2019 01:19:28 +0300 Subject: [PATCH] feat(v2): allow line highlighting (#1860) * feat(v2): allow line highlighting * Refactor: use parse-numeric-range for parsing * Add line highlighting for live code blocks * feat(v2): add sticky footer (#1855) * feat(v2): add sticky footer * Update CHANGELOG-2.x.md * Update CHANGELOG-2.x.md * fix(v2): remove empty doc sidebar container (#1870) * docs: showcase user Amphora (#1873) * Add Amphora Data link to users Adds Amphora Data to the list of users * Add Amphora Data logo * fix case of image path * Move Image into users directory * use black amphora image * fix(v2): fix search input blur on desktop (#1874) * docs(v2): showcase user mbt-bundle (#1875) * feat(v2): postcss should only use stage 3 features instead of stage 2 (#1872) * feat(v2): add ability expand all items in doc sidebar (#1876) * feat(v2): add ability expand all items in doc sidebar * Fix tests * Refactor: use themeConfig * Improve docs * Revert unnecessary changes * Refactor: better consistency * Revert extra change * Refactor: use useDocusaurusContext to get config value * chore(v2): update changelog * chore(v2): update showcase and broken link * perf(v2): disable hash for css modules localident in dev (#1882) * perf(v2): disable hash for css modules localident in dev * changelog * feat(v2): display footer in docs page for consistency (#1883) * feat(v2): display footer in docs page * nits * address review * nits * docs(v2): fix format inline code (#1888) * docs(v2): add docs on useful client api (#1890) * docs(v2): add docs on useful client api * Update docusaurus-core.md * Update website/docs/docusaurus-core.md * Update website/docs/docusaurus-core.md * Update website/docs/docusaurus-core.md * Update website/docs/docusaurus-core.md * docs(v2): update config docs (#1885) * fix(v2): do not show categories with empty items (#1891) * styles(v2): update infima and fix styles (#1892) * fix(v2): wrong css class * v2.0.0-alpha.31 * chore(v2): update docs and changelog * docs(v2): update plugins, presets and themes docs (#1889) * docs(v2): update plugins, presets and themes docs * ideal image plugin * proof reading * Merge master * refactor(v2): Convert sitemap plugin to TypeScript (#1894) * Convert sitemap plugin to TypeScript Test - enabled the sitemap plugin in the v2 website and verified that the sitemap is created after running `docusaurus build`. * Addressing review comments * perf(v2): significantly reduce bundle size & initial html payload (#1898) * perf(v2): reduce bundle size significantly with super short chunk name and registry * changelog * use hash:8 as id for better long term caching * even shorter filename. slice contenthash * fix(v2): align search icon on small width device (#1893) * fix(v2): align search icon on small width device * nits * nits * refactor(v2): refactor dark toggle into a hook (#1899) * change(v2): refactor dark toggle into a theme * follow how themes resolve files * let theme hook to pick up default theme by itself * perf(v2): reduce memory usage consumption (#1900) * misc(v1): use primary color for hovered items in table of contents (#1871) * fix issue#1752 when element in side nav is hovered over the color changes. * Update main.css * fix(v1): mobile safari search input misalignment in header (#1895) * misc(v2): v1 backward compatibility for USE_SSH env var (#1880) * misc(v2): address comments * misc(v2): update CHANGELOG --- CHANGELOG-2.x.md | 1 + .../docusaurus-theme-classic/package.json | 1 + .../src/theme/CodeBlock/index.js | 32 +++++++++++---- .../package.json | 1 + .../src/theme/CodeBlock/index.js | 39 +++++++++++++++---- yarn.lock | 5 +++ 6 files changed, 63 insertions(+), 16 deletions(-) diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md index db9ce20328..e8139d2640 100644 --- a/CHANGELOG-2.x.md +++ b/CHANGELOG-2.x.md @@ -8,6 +8,7 @@ - Significantly reduce main bundle size and initial HTML payload on production build. Generated JS files from webpack is also shorter in name. - Refactor dark toggle into a hook. - Changed the way we read the `USE_SSH` env variable during deployment to be the same as in v1. +- Add highlight specific lines in code blocks. ## 2.0.0-alpha.31 diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json index bdac8087f0..1d41e20657 100644 --- a/packages/docusaurus-theme-classic/package.json +++ b/packages/docusaurus-theme-classic/package.json @@ -13,6 +13,7 @@ "classnames": "^2.2.6", "clipboard": "^2.0.4", "infima": "0.2.0-alpha.3", + "parse-numeric-range": "^0.0.2", "prism-react-renderer": "^1.0.2", "react-toggle": "^4.1.1" }, diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js index 1914e65b78..1703b57b48 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js @@ -10,10 +10,13 @@ import classnames from 'classnames'; import Highlight, {defaultProps} from 'prism-react-renderer'; import defaultTheme from 'prism-react-renderer/themes/palenight'; import Clipboard from 'clipboard'; +import rangeParser from 'parse-numeric-range'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import styles from './styles.module.css'; -export default ({children, className: languageClassName}) => { +const highlightLinesRangeRegex = /{([\d,-]+)}/; + +export default ({children, className: languageClassName, metastring}) => { const { siteConfig: { themeConfig: {prismTheme}, @@ -22,7 +25,12 @@ export default ({children, className: languageClassName}) => { const [showCopied, setShowCopied] = useState(false); const target = useRef(null); const button = useRef(null); + let highlightLines = []; + if (metastring && highlightLinesRangeRegex.test(metastring)) { + const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1]; + highlightLines = rangeParser.parse(highlightLinesRange).filter(n => n > 0); + } useEffect(() => { let clipboard; @@ -61,13 +69,21 @@ export default ({children, className: languageClassName}) => { ref={target} className={classnames(className, styles.codeBlock)} style={style}> - {tokens.map((line, i) => ( -
- {line.map((token, key) => ( - - ))} -
- ))} + {tokens.map((line, i) => { + const lineProps = getLineProps({line, key: i}); + + if (highlightLines.includes(i + 1)) { + lineProps.className = `${lineProps.className} highlight-line`; + } + + return ( +
+ {line.map((token, key) => ( + + ))} +
+ ); + })}