Skip to content

Commit

Permalink
feat(v2): allow line highlighting (#1860)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
lex111 authored and yangshun committed Oct 27, 2019
1 parent 812a30b commit 9c69dfd
Show file tree
Hide file tree
Showing 6 changed files with 63 additions and 16 deletions.
1 change: 1 addition & 0 deletions CHANGELOG-2.x.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
32 changes: 24 additions & 8 deletions packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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},
Expand All @@ -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;

Expand Down Expand Up @@ -61,13 +69,21 @@ export default ({children, className: languageClassName}) => {
ref={target}
className={classnames(className, styles.codeBlock)}
style={style}>
{tokens.map((line, i) => (
<div key={i} {...getLineProps({line, key: i})}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({token, key})} />
))}
</div>
))}
{tokens.map((line, i) => {
const lineProps = getLineProps({line, key: i});

if (highlightLines.includes(i + 1)) {
lineProps.className = `${lineProps.className} highlight-line`;
}

return (
<div key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({token, key})} />
))}
</div>
);
})}
</pre>
<button
ref={button}
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-live-codeblock/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"@philpl/buble": "^0.19.7",
"classnames": "^2.2.6",
"clipboard": "^2.0.4",
"parse-numeric-range": "^0.0.2",
"prism-react-renderer": "^1.0.2",
"react-live": "^2.2.1"
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,20 @@ 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 Playground from '@theme/Playground';
import styles from './styles.module.css';

export default ({children, className: languageClassName, live, ...props}) => {
const highlightLinesRangeRegex = /{([\d,-]+)}/;

export default ({
children,
className: languageClassName,
live,
metastring,
...props
}) => {
const {
siteConfig: {
themeConfig: {prismTheme},
Expand All @@ -23,6 +32,12 @@ export default ({children, className: languageClassName, live, ...props}) => {
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;
Expand Down Expand Up @@ -73,13 +88,21 @@ export default ({children, className: languageClassName, live, ...props}) => {
ref={target}
className={classnames(className, styles.codeBlock)}
style={style}>
{tokens.map((line, i) => (
<div key={i} {...getLineProps({line, key: i})}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({token, key})} />
))}
</div>
))}
{tokens.map((line, i) => {
const lineProps = getLineProps({line, key: i});

if (highlightLines.includes(i + 1)) {
lineProps.className = `${lineProps.className} highlight-line`;
}

return (
<div key={i} {...lineProps}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({token, key})} />
))}
</div>
);
})}
</pre>
<button
ref={button}
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -11842,6 +11842,11 @@ parse-json@^4.0.0:
error-ex "^1.3.1"
json-parse-better-errors "^1.0.1"

parse-numeric-range@^0.0.2:
version "0.0.2"
resolved "https://registry.yarnpkg.com/parse-numeric-range/-/parse-numeric-range-0.0.2.tgz#b4f09d413c7adbcd987f6e9233c7b4b210c938e4"
integrity sha1-tPCdQTx6282Yf26SM8e0shDJOOQ=

parse-path@^4.0.0:
version "4.0.1"
resolved "https://registry.yarnpkg.com/parse-path/-/parse-path-4.0.1.tgz#0ec769704949778cb3b8eda5e994c32073a1adff"
Expand Down

0 comments on commit 9c69dfd

Please sign in to comment.