This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Refactor markdown syntax highlighting.#720

Merged
shammamah-zz merged 17 commits into from
Dec 20, 2019
Merged

Refactor markdown syntax highlighting. #720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
9d9aa6e
Refactor markdown syntax highlighting.
Dec 17, 2019
103fcb5
Disable eslint error.
Dec 17, 2019
f679951
Merge branch 'dev' into 713-highlightjs
Dec 17, 2019
cc70aed
Fix formatting.
Dec 17, 2019
6c98c28
Fix naming and file locations.
Dec 17, 2019
f80bf28
Change MarkdownHighlighter to be an object.
Dec 17, 2019
b2893ed
Update CHANGELOG.
Dec 17, 2019
b679a6a
Add plugins for async functions.
Dec 18, 2019
dff9f8c
Remove github stylesheet.
Dec 19, 2019
6bad06d
Move highlight stylesheet import.
Dec 19, 2019
37d34eb
Merge branch 'dev' into 713-highlightjs
Dec 19, 2019
3ca7aa2
Update hljs lazy loading.
Dec 19, 2019
a3fb701
Add markdown highlighting test.
Dec 19, 2019
3ebf656
Move stylesheet import to highlight.js.
Dec 20, 2019
78aaeda
Add percy snapshot to test and fix window override test.
Dec 20, 2019
0fd28a0
Change assert to wait_for_text_to_equal.
Dec 20, 2019
a2ba931
Use click to trigger md render in test.
Dec 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
- [#706](https://github.com/plotly/dash-core-components/pull/706)
- Upgraded plotly.js to [1.51.3](https://github.com/plotly/plotly.js/releases/tag/v1.51.3)

### Changed
- [#720](https://github.com/plotly/dash-core-components/pull/720)
- `highlight.js` is now bundled into the package, and no longer sets the `window.hljs` variable. Similarly to how `plotly.js` is handled, it is overridden by a user-provided version if one exists.

## [1.6.0] - 2019-11-27
### Updated
- Upgraded plotly.js to 1.51.2 [#708](https://github.com/plotly/dash-core-components/pull/708)
Expand Down
4 changes: 3 additions & 1 deletion babel.config.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,7 +4,9 @@ const presets = [
];

const plugins = [
'@babel/plugin-syntax-dynamic-import'
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-transform-async-to-generator',
'@babel/plugin-transform-runtime'
];

// eslint-disable-next-line no-process-env
Expand Down
5 changes: 1 addition & 4 deletions dash_core_components_base/__init__.py
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -43,6 +43,7 @@
'datepicker',
'dropdown',
'graph',
'highlight',
'markdown',
'upload'
]
Expand DownExpand Up@@ -70,10 +71,6 @@
} for async_resource in async_resources])

_js_dist.extend([
{
'relative_package_path': 'highlight.pack.js',
'namespace': 'dash_core_components'
},

@Marc-Andre-RivetMarc-Andre-RivetDec 17, 2019•
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

{
'relative_package_path': '{}.min.js'.format(__name__),
'external_url': (
Expand Down
2 changes: 0 additions & 2 deletions dash_core_components_base/highlight.pack.js
View file
Open in desktop

This file was deleted.

245 changes: 240 additions & 5 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -37,6 +37,7 @@
"dependencies": {
"color": "^3.1.0",
"fast-isnumeric": "^1.1.3",
"highlight.js": "^9.17.1",
"moment": "^2.20.1",
"plotly.js": "1.51.3",
"prop-types": "^15.6.0",
Expand All@@ -57,6 +58,8 @@
"@babel/core": "^7.4.0",
"@babel/plugin-proposal-object-rest-spread": "^7.4.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-async-to-generator": "^7.7.4",
"@babel/plugin-transform-runtime": "^7.7.6",
"@babel/preset-env": "^7.4.1",
"@babel/preset-react": "^7.0.0",
"@plotly/dash-component-plugins": "^1.0.2",
Expand Down
20 changes: 13 additions & 7 deletions src/fragments/Markdown.react.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,12 +2,18 @@ import React, {Component} from 'react';
import {type} from 'ramda';
import Markdown from 'react-markdown';

import MarkdownHighlighter from '../utils/MarkdownHighlighter';
import {propTypes, defaultProps} from '../components/Markdown.react';
import '../components/css/highlight.css';

export default class DashMarkdown extends Component {
constructor(props) {
super(props);

if (MarkdownHighlighter.isReady !== true) {
MarkdownHighlighter.isReady.then(() => {
this.setState({});
});
}
this.highlightCode = this.highlightCode.bind(this);
this.dedent = this.dedent.bind(this);
}
Expand All@@ -21,15 +27,15 @@ export default class DashMarkdown extends Component {
}

highlightCode() {
if (!window.hljs) {
// skip highlighting if highlight.js isn't found
return;
}
if (this.mdContainer) {
const nodes = this.mdContainer.querySelectorAll('pre code');

for (let i = 0; i < nodes.length; i++) {
window.hljs.highlightBlock(nodes[i]);
if (MarkdownHighlighter.hljs) {
for (let i = 0; i < nodes.length; i++) {
MarkdownHighlighter.hljs.highlightBlock(nodes[i]);
}
} else {
MarkdownHighlighter.loadhljs();

@Marc-Andre-RivetMarc-Andre-RivetDec 17, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the existing implementation does not take full advantage of the react-markdown ability to get its renderer overriden -- similarly to https://github.com/plotly/dash-core-components/pull/711/files#diff-5b56ed82805404e28302aef5147d04a2R129 it should be possible to hook up the highlight directly onto the code renderer and simplify this component / usage.

@Marc-Andre-RivetMarc-Andre-RivetDec 19, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue created: #724, will not be addressed as part of this PR.

}
}
}
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Refactor markdown syntax highlighting.#720
 Merged

shammamah-zz
merged 17 commits into

from

Dec 20, 2019
 Merged


Refactor markdown syntax highlighting.
#720
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
9d9aa6e

Refactor markdown syntax highlighting.

Dec 17, 2019
103fcb5

Disable eslint error.

Dec 17, 2019
f679951

Merge branch 'dev' into 713-highlightjs

Dec 17, 2019
cc70aed

Fix formatting.

Dec 17, 2019
6c98c28

Fix naming and file locations.

Dec 17, 2019
f80bf28

Change MarkdownHighlighter to be an object.

Dec 17, 2019
b2893ed

Update CHANGELOG.

Dec 17, 2019
b679a6a

Add plugins for async functions.

Dec 18, 2019
dff9f8c

Remove github stylesheet.

Dec 19, 2019
6bad06d

Move highlight stylesheet import.

Dec 19, 2019
37d34eb

Merge branch 'dev' into 713-highlightjs

Dec 19, 2019
3ca7aa2

Update hljs lazy loading.

Dec 19, 2019
a3fb701

Add markdown highlighting test.

Dec 19, 2019
3ebf656

Move stylesheet import to highlight.js.

Dec 20, 2019
78aaeda

Add percy snapshot to test and fix window override test.

Dec 20, 2019
0fd28a0

Change assert to wait_for_text_to_equal.

Dec 20, 2019
a2ba931

Use click to trigger md render in test.

Dec 20, 2019

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
- [#706](https://github.com/plotly/dash-core-components/pull/706)
 - Upgraded plotly.js to [1.51.3](https://github.com/plotly/plotly.js/releases/tag/v1.51.3)

### Changed
- [#720](https://github.com/plotly/dash-core-components/pull/720)
 - `highlight.js` is now bundled into the package, and no longer sets the `window.hljs` variable. Similarly to how `plotly.js` is handled, it is overridden by a user-provided version if one exists.

## [1.6.0] - 2019-11-27
### Updated
- Upgraded plotly.js to 1.51.2 [#708](https://github.com/plotly/dash-core-components/pull/708)
Expand Down

4 changes: 3 additions & 1 deletion
babel.config.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,7 +4,9 @@ const presets = [
];

const plugins = [
 '@babel/plugin-syntax-dynamic-import'
 '@babel/plugin-syntax-dynamic-import',
 '@babel/plugin-transform-async-to-generator',
 '@babel/plugin-transform-runtime'
];

// eslint-disable-next-line no-process-env
Expand Down

5 changes: 1 addition & 4 deletions
dash_core_components_base/__init__.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,6 +43,7 @@
 'datepicker',
 'dropdown',
 'graph',
 'highlight',
 'markdown',
 'upload'
]
Expand DownExpand Up@@ -70,10 +71,6 @@
 } for async_resource in async_resources])

_js_dist.extend([
 {
 'relative_package_path': 'highlight.pack.js',
 'namespace': 'dash_core_components'
 },
@Marc-Andre-RivetMarc-Andre-RivetDec 17, 2019•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉
 {
 'relative_package_path': '{}.min.js'.format(__name__),
 'external_url': (
Expand Down

2 changes: 0 additions & 2 deletions
dash_core_components_base/highlight.pack.js

View file


Open in desktop


This file was deleted.


245 changes: 240 additions & 5 deletions
package-lock.json

View file


Open in desktop


Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.


3 changes: 3 additions & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -37,6 +37,7 @@
 "dependencies": {
 "color": "^3.1.0",
 "fast-isnumeric": "^1.1.3",
 "highlight.js": "^9.17.1",
 "moment": "^2.20.1",
 "plotly.js": "1.51.3",
 "prop-types": "^15.6.0",
Expand All@@ -57,6 +58,8 @@
 "@babel/core": "^7.4.0",
 "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
 "@babel/plugin-syntax-dynamic-import": "^7.2.0",
 "@babel/plugin-transform-async-to-generator": "^7.7.4",
 "@babel/plugin-transform-runtime": "^7.7.6",
 "@babel/preset-env": "^7.4.1",
 "@babel/preset-react": "^7.0.0",
 "@plotly/dash-component-plugins": "^1.0.2",
Expand Down

20 changes: 13 additions & 7 deletions
src/fragments/Markdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,12 +2,18 @@ import React, {Component} from 'react';
import {type} from 'ramda';
import Markdown from 'react-markdown';

import MarkdownHighlighter from '../utils/MarkdownHighlighter';
import {propTypes, defaultProps} from '../components/Markdown.react';
import '../components/css/highlight.css';

export default class DashMarkdown extends Component {
 constructor(props) {
 super(props);

 if (MarkdownHighlighter.isReady !== true) {
 MarkdownHighlighter.isReady.then(() => {
 this.setState({});
 });
 }
 this.highlightCode = this.highlightCode.bind(this);
 this.dedent = this.dedent.bind(this);
 }
Expand All@@ -21,15 +27,15 @@ export default class DashMarkdown extends Component {
 }

 highlightCode() {
 if (!window.hljs) {
 // skip highlighting if highlight.js isn't found
 return;
 }
 if (this.mdContainer) {
 const nodes = this.mdContainer.querySelectorAll('pre code');

 for (let i = 0; i < nodes.length; i++) {
 window.hljs.highlightBlock(nodes[i]);
 if (MarkdownHighlighter.hljs) {
 for (let i = 0; i < nodes.length; i++) {
 MarkdownHighlighter.hljs.highlightBlock(nodes[i]);
 }
 } else {
 MarkdownHighlighter.loadhljs();
@Marc-Andre-RivetMarc-Andre-RivetDec 17, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the existing implementation does not take full advantage of the react-markdown ability to get its renderer overriden -- similarly to https://github.com/plotly/dash-core-components/pull/711/files#diff-5b56ed82805404e28302aef5147d04a2R129 it should be possible to hook up the highlight directly onto the code renderer and simplify this component / usage.
@Marc-Andre-RivetMarc-Andre-RivetDec 19, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue created: #724, will not be addressed as part of this PR.
 }
 }
 }
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Refactor markdown syntax highlighting.#720
 Merged

shammamah-zz
merged 17 commits into

from

Dec 20, 2019
 Merged


Refactor markdown syntax highlighting.
#720
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
9d9aa6e

Refactor markdown syntax highlighting.

Dec 17, 2019
103fcb5

Disable eslint error.

Dec 17, 2019
f679951

Merge branch 'dev' into 713-highlightjs

Dec 17, 2019
cc70aed

Fix formatting.

Dec 17, 2019
6c98c28

Fix naming and file locations.

Dec 17, 2019
f80bf28

Change MarkdownHighlighter to be an object.

Dec 17, 2019
b2893ed

Update CHANGELOG.

Dec 17, 2019
b679a6a

Add plugins for async functions.

Dec 18, 2019
dff9f8c

Remove github stylesheet.

Dec 19, 2019
6bad06d

Move highlight stylesheet import.

Dec 19, 2019
37d34eb

Merge branch 'dev' into 713-highlightjs

Dec 19, 2019
3ca7aa2

Update hljs lazy loading.

Dec 19, 2019
a3fb701

Add markdown highlighting test.

Dec 19, 2019
3ebf656

Move stylesheet import to highlight.js.

Dec 20, 2019
78aaeda

Add percy snapshot to test and fix window override test.

Dec 20, 2019
0fd28a0

Change assert to wait_for_text_to_equal.

Dec 20, 2019
a2ba931

Use click to trigger md render in test.

Dec 20, 2019

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
- [#706](https://github.com/plotly/dash-core-components/pull/706)
 - Upgraded plotly.js to [1.51.3](https://github.com/plotly/plotly.js/releases/tag/v1.51.3)

### Changed
- [#720](https://github.com/plotly/dash-core-components/pull/720)
 - `highlight.js` is now bundled into the package, and no longer sets the `window.hljs` variable. Similarly to how `plotly.js` is handled, it is overridden by a user-provided version if one exists.

## [1.6.0] - 2019-11-27
### Updated
- Upgraded plotly.js to 1.51.2 [#708](https://github.com/plotly/dash-core-components/pull/708)
Expand Down

4 changes: 3 additions & 1 deletion
babel.config.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,7 +4,9 @@ const presets = [
];

const plugins = [
 '@babel/plugin-syntax-dynamic-import'
 '@babel/plugin-syntax-dynamic-import',
 '@babel/plugin-transform-async-to-generator',
 '@babel/plugin-transform-runtime'
];

// eslint-disable-next-line no-process-env
Expand Down

5 changes: 1 addition & 4 deletions
dash_core_components_base/__init__.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,6 +43,7 @@
 'datepicker',
 'dropdown',
 'graph',
 'highlight',
 'markdown',
 'upload'
]
Expand DownExpand Up@@ -70,10 +71,6 @@
 } for async_resource in async_resources])

_js_dist.extend([
 {
 'relative_package_path': 'highlight.pack.js',
 'namespace': 'dash_core_components'
 },
@Marc-Andre-RivetMarc-Andre-RivetDec 17, 2019•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉
 {
 'relative_package_path': '{}.min.js'.format(__name__),
 'external_url': (
Expand Down

2 changes: 0 additions & 2 deletions
dash_core_components_base/highlight.pack.js

View file


Open in desktop


This file was deleted.


245 changes: 240 additions & 5 deletions
package-lock.json

View file


Open in desktop


Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.


3 changes: 3 additions & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -37,6 +37,7 @@
 "dependencies": {
 "color": "^3.1.0",
 "fast-isnumeric": "^1.1.3",
 "highlight.js": "^9.17.1",
 "moment": "^2.20.1",
 "plotly.js": "1.51.3",
 "prop-types": "^15.6.0",
Expand All@@ -57,6 +58,8 @@
 "@babel/core": "^7.4.0",
 "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
 "@babel/plugin-syntax-dynamic-import": "^7.2.0",
 "@babel/plugin-transform-async-to-generator": "^7.7.4",
 "@babel/plugin-transform-runtime": "^7.7.6",
 "@babel/preset-env": "^7.4.1",
 "@babel/preset-react": "^7.0.0",
 "@plotly/dash-component-plugins": "^1.0.2",
Expand Down

20 changes: 13 additions & 7 deletions
src/fragments/Markdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,12 +2,18 @@ import React, {Component} from 'react';
import {type} from 'ramda';
import Markdown from 'react-markdown';

import MarkdownHighlighter from '../utils/MarkdownHighlighter';
import {propTypes, defaultProps} from '../components/Markdown.react';
import '../components/css/highlight.css';

export default class DashMarkdown extends Component {
 constructor(props) {
 super(props);

 if (MarkdownHighlighter.isReady !== true) {
 MarkdownHighlighter.isReady.then(() => {
 this.setState({});
 });
 }
 this.highlightCode = this.highlightCode.bind(this);
 this.dedent = this.dedent.bind(this);
 }
Expand All@@ -21,15 +27,15 @@ export default class DashMarkdown extends Component {
 }

 highlightCode() {
 if (!window.hljs) {
 // skip highlighting if highlight.js isn't found
 return;
 }
 if (this.mdContainer) {
 const nodes = this.mdContainer.querySelectorAll('pre code');

 for (let i = 0; i < nodes.length; i++) {
 window.hljs.highlightBlock(nodes[i]);
 if (MarkdownHighlighter.hljs) {
 for (let i = 0; i < nodes.length; i++) {
 MarkdownHighlighter.hljs.highlightBlock(nodes[i]);
 }
 } else {
 MarkdownHighlighter.loadhljs();
@Marc-Andre-RivetMarc-Andre-RivetDec 17, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the existing implementation does not take full advantage of the react-markdown ability to get its renderer overriden -- similarly to https://github.com/plotly/dash-core-components/pull/711/files#diff-5b56ed82805404e28302aef5147d04a2R129 it should be possible to hook up the highlight directly onto the code renderer and simplify this component / usage.
@Marc-Andre-RivetMarc-Andre-RivetDec 19, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue created: #724, will not be addressed as part of this PR.
 }
 }
 }
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Refactor markdown syntax highlighting.#720
 Merged

shammamah-zz
merged 17 commits into

from

Dec 20, 2019
 Merged


Refactor markdown syntax highlighting.
#720
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
9d9aa6e

Refactor markdown syntax highlighting.

Dec 17, 2019
103fcb5

Disable eslint error.

Dec 17, 2019
f679951

Merge branch 'dev' into 713-highlightjs

Dec 17, 2019
cc70aed

Fix formatting.

Dec 17, 2019
6c98c28

Fix naming and file locations.

Dec 17, 2019
f80bf28

Change MarkdownHighlighter to be an object.

Dec 17, 2019
b2893ed

Update CHANGELOG.

Dec 17, 2019
b679a6a

Add plugins for async functions.

Dec 18, 2019
dff9f8c

Remove github stylesheet.

Dec 19, 2019
6bad06d

Move highlight stylesheet import.

Dec 19, 2019
37d34eb

Merge branch 'dev' into 713-highlightjs

Dec 19, 2019
3ca7aa2

Update hljs lazy loading.

Dec 19, 2019
a3fb701

Add markdown highlighting test.

Dec 19, 2019
3ebf656

Move stylesheet import to highlight.js.

Dec 20, 2019
78aaeda

Add percy snapshot to test and fix window override test.

Dec 20, 2019
0fd28a0

Change assert to wait_for_text_to_equal.

Dec 20, 2019
a2ba931

Use click to trigger md render in test.

Dec 20, 2019

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
- [#706](https://github.com/plotly/dash-core-components/pull/706)
 - Upgraded plotly.js to [1.51.3](https://github.com/plotly/plotly.js/releases/tag/v1.51.3)

### Changed
- [#720](https://github.com/plotly/dash-core-components/pull/720)
 - `highlight.js` is now bundled into the package, and no longer sets the `window.hljs` variable. Similarly to how `plotly.js` is handled, it is overridden by a user-provided version if one exists.

## [1.6.0] - 2019-11-27
### Updated
- Upgraded plotly.js to 1.51.2 [#708](https://github.com/plotly/dash-core-components/pull/708)
Expand Down

4 changes: 3 additions & 1 deletion
babel.config.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,7 +4,9 @@ const presets = [
];

const plugins = [
 '@babel/plugin-syntax-dynamic-import'
 '@babel/plugin-syntax-dynamic-import',
 '@babel/plugin-transform-async-to-generator',
 '@babel/plugin-transform-runtime'
];

// eslint-disable-next-line no-process-env
Expand Down

5 changes: 1 addition & 4 deletions
dash_core_components_base/__init__.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,6 +43,7 @@
 'datepicker',
 'dropdown',
 'graph',
 'highlight',
 'markdown',
 'upload'
]
Expand DownExpand Up@@ -70,10 +71,6 @@
 } for async_resource in async_resources])

_js_dist.extend([
 {
 'relative_package_path': 'highlight.pack.js',
 'namespace': 'dash_core_components'
 },
@Marc-Andre-RivetMarc-Andre-RivetDec 17, 2019•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉
 {
 'relative_package_path': '{}.min.js'.format(__name__),
 'external_url': (
Expand Down

2 changes: 0 additions & 2 deletions
dash_core_components_base/highlight.pack.js

View file


Open in desktop


This file was deleted.


245 changes: 240 additions & 5 deletions
package-lock.json

View file


Open in desktop


Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.


3 changes: 3 additions & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -37,6 +37,7 @@
 "dependencies": {
 "color": "^3.1.0",
 "fast-isnumeric": "^1.1.3",
 "highlight.js": "^9.17.1",
 "moment": "^2.20.1",
 "plotly.js": "1.51.3",
 "prop-types": "^15.6.0",
Expand All@@ -57,6 +58,8 @@
 "@babel/core": "^7.4.0",
 "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
 "@babel/plugin-syntax-dynamic-import": "^7.2.0",
 "@babel/plugin-transform-async-to-generator": "^7.7.4",
 "@babel/plugin-transform-runtime": "^7.7.6",
 "@babel/preset-env": "^7.4.1",
 "@babel/preset-react": "^7.0.0",
 "@plotly/dash-component-plugins": "^1.0.2",
Expand Down

20 changes: 13 additions & 7 deletions
src/fragments/Markdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,12 +2,18 @@ import React, {Component} from 'react';
import {type} from 'ramda';
import Markdown from 'react-markdown';

import MarkdownHighlighter from '../utils/MarkdownHighlighter';
import {propTypes, defaultProps} from '../components/Markdown.react';
import '../components/css/highlight.css';

export default class DashMarkdown extends Component {
 constructor(props) {
 super(props);

 if (MarkdownHighlighter.isReady !== true) {
 MarkdownHighlighter.isReady.then(() => {
 this.setState({});
 });
 }
 this.highlightCode = this.highlightCode.bind(this);
 this.dedent = this.dedent.bind(this);
 }
Expand All@@ -21,15 +27,15 @@ export default class DashMarkdown extends Component {
 }

 highlightCode() {
 if (!window.hljs) {
 // skip highlighting if highlight.js isn't found
 return;
 }
 if (this.mdContainer) {
 const nodes = this.mdContainer.querySelectorAll('pre code');

 for (let i = 0; i < nodes.length; i++) {
 window.hljs.highlightBlock(nodes[i]);
 if (MarkdownHighlighter.hljs) {
 for (let i = 0; i < nodes.length; i++) {
 MarkdownHighlighter.hljs.highlightBlock(nodes[i]);
 }
 } else {
 MarkdownHighlighter.loadhljs();
@Marc-Andre-RivetMarc-Andre-RivetDec 17, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the existing implementation does not take full advantage of the react-markdown ability to get its renderer overriden -- similarly to https://github.com/plotly/dash-core-components/pull/711/files#diff-5b56ed82805404e28302aef5147d04a2R129 it should be possible to hook up the highlight directly onto the code renderer and simplify this component / usage.
@Marc-Andre-RivetMarc-Andre-RivetDec 19, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue created: #724, will not be addressed as part of this PR.
 }
 }
 }
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Refactor markdown syntax highlighting.#720
 Merged

shammamah-zz
merged 17 commits into

from

Dec 20, 2019
 Merged


Refactor markdown syntax highlighting.
#720
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
9d9aa6e

Refactor markdown syntax highlighting.

Dec 17, 2019
103fcb5

Disable eslint error.

Dec 17, 2019
f679951

Merge branch 'dev' into 713-highlightjs

Dec 17, 2019
cc70aed

Fix formatting.

Dec 17, 2019
6c98c28

Fix naming and file locations.

Dec 17, 2019
f80bf28

Change MarkdownHighlighter to be an object.

Dec 17, 2019
b2893ed

Update CHANGELOG.

Dec 17, 2019
b679a6a

Add plugins for async functions.

Dec 18, 2019
dff9f8c

Remove github stylesheet.

Dec 19, 2019
6bad06d

Move highlight stylesheet import.

Dec 19, 2019
37d34eb

Merge branch 'dev' into 713-highlightjs

Dec 19, 2019
3ca7aa2

Update hljs lazy loading.

Dec 19, 2019
a3fb701

Add markdown highlighting test.

Dec 19, 2019
3ebf656

Move stylesheet import to highlight.js.

Dec 20, 2019
78aaeda

Add percy snapshot to test and fix window override test.

Dec 20, 2019
0fd28a0

Change assert to wait_for_text_to_equal.

Dec 20, 2019
a2ba931

Use click to trigger md render in test.

Dec 20, 2019

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
- [#706](https://github.com/plotly/dash-core-components/pull/706)
 - Upgraded plotly.js to [1.51.3](https://github.com/plotly/plotly.js/releases/tag/v1.51.3)

### Changed
- [#720](https://github.com/plotly/dash-core-components/pull/720)
 - `highlight.js` is now bundled into the package, and no longer sets the `window.hljs` variable. Similarly to how `plotly.js` is handled, it is overridden by a user-provided version if one exists.

## [1.6.0] - 2019-11-27
### Updated
- Upgraded plotly.js to 1.51.2 [#708](https://github.com/plotly/dash-core-components/pull/708)
Expand Down

4 changes: 3 additions & 1 deletion
babel.config.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,7 +4,9 @@ const presets = [
];

const plugins = [
 '@babel/plugin-syntax-dynamic-import'
 '@babel/plugin-syntax-dynamic-import',
 '@babel/plugin-transform-async-to-generator',
 '@babel/plugin-transform-runtime'
];

// eslint-disable-next-line no-process-env
Expand Down

5 changes: 1 addition & 4 deletions
dash_core_components_base/__init__.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,6 +43,7 @@
 'datepicker',
 'dropdown',
 'graph',
 'highlight',
 'markdown',
 'upload'
]
Expand DownExpand Up@@ -70,10 +71,6 @@
 } for async_resource in async_resources])

_js_dist.extend([
 {
 'relative_package_path': 'highlight.pack.js',
 'namespace': 'dash_core_components'
 },
@Marc-Andre-RivetMarc-Andre-RivetDec 17, 2019•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉
 {
 'relative_package_path': '{}.min.js'.format(__name__),
 'external_url': (
Expand Down

2 changes: 0 additions & 2 deletions
dash_core_components_base/highlight.pack.js

View file


Open in desktop


This file was deleted.


245 changes: 240 additions & 5 deletions
package-lock.json

View file


Open in desktop


Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.


3 changes: 3 additions & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -37,6 +37,7 @@
 "dependencies": {
 "color": "^3.1.0",
 "fast-isnumeric": "^1.1.3",
 "highlight.js": "^9.17.1",
 "moment": "^2.20.1",
 "plotly.js": "1.51.3",
 "prop-types": "^15.6.0",
Expand All@@ -57,6 +58,8 @@
 "@babel/core": "^7.4.0",
 "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
 "@babel/plugin-syntax-dynamic-import": "^7.2.0",
 "@babel/plugin-transform-async-to-generator": "^7.7.4",
 "@babel/plugin-transform-runtime": "^7.7.6",
 "@babel/preset-env": "^7.4.1",
 "@babel/preset-react": "^7.0.0",
 "@plotly/dash-component-plugins": "^1.0.2",
Expand Down

20 changes: 13 additions & 7 deletions
src/fragments/Markdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,12 +2,18 @@ import React, {Component} from 'react';
import {type} from 'ramda';
import Markdown from 'react-markdown';

import MarkdownHighlighter from '../utils/MarkdownHighlighter';
import {propTypes, defaultProps} from '../components/Markdown.react';
import '../components/css/highlight.css';

export default class DashMarkdown extends Component {
 constructor(props) {
 super(props);

 if (MarkdownHighlighter.isReady !== true) {
 MarkdownHighlighter.isReady.then(() => {
 this.setState({});
 });
 }
 this.highlightCode = this.highlightCode.bind(this);
 this.dedent = this.dedent.bind(this);
 }
Expand All@@ -21,15 +27,15 @@ export default class DashMarkdown extends Component {
 }

 highlightCode() {
 if (!window.hljs) {
 // skip highlighting if highlight.js isn't found
 return;
 }
 if (this.mdContainer) {
 const nodes = this.mdContainer.querySelectorAll('pre code');

 for (let i = 0; i < nodes.length; i++) {
 window.hljs.highlightBlock(nodes[i]);
 if (MarkdownHighlighter.hljs) {
 for (let i = 0; i < nodes.length; i++) {
 MarkdownHighlighter.hljs.highlightBlock(nodes[i]);
 }
 } else {
 MarkdownHighlighter.loadhljs();
@Marc-Andre-RivetMarc-Andre-RivetDec 17, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the existing implementation does not take full advantage of the react-markdown ability to get its renderer overriden -- similarly to https://github.com/plotly/dash-core-components/pull/711/files#diff-5b56ed82805404e28302aef5147d04a2R129 it should be possible to hook up the highlight directly onto the code renderer and simplify this component / usage.
@Marc-Andre-RivetMarc-Andre-RivetDec 19, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue created: #724, will not be addressed as part of this PR.
 }
 }
 }
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Refactor markdown syntax highlighting.#720
 Merged

shammamah-zz
merged 17 commits into

from

Dec 20, 2019
 Merged


Refactor markdown syntax highlighting.
#720
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
9d9aa6e

Refactor markdown syntax highlighting.

Dec 17, 2019
103fcb5

Disable eslint error.

Dec 17, 2019
f679951

Merge branch 'dev' into 713-highlightjs

Dec 17, 2019
cc70aed

Fix formatting.

Dec 17, 2019
6c98c28

Fix naming and file locations.

Dec 17, 2019
f80bf28

Change MarkdownHighlighter to be an object.

Dec 17, 2019
b2893ed

Update CHANGELOG.

Dec 17, 2019
b679a6a

Add plugins for async functions.

Dec 18, 2019
dff9f8c

Remove github stylesheet.

Dec 19, 2019
6bad06d

Move highlight stylesheet import.

Dec 19, 2019
37d34eb

Merge branch 'dev' into 713-highlightjs

Dec 19, 2019
3ca7aa2

Update hljs lazy loading.

Dec 19, 2019
a3fb701

Add markdown highlighting test.

Dec 19, 2019
3ebf656

Move stylesheet import to highlight.js.

Dec 20, 2019
78aaeda

Add percy snapshot to test and fix window override test.

Dec 20, 2019
0fd28a0

Change assert to wait_for_text_to_equal.

Dec 20, 2019
a2ba931

Use click to trigger md render in test.

Dec 20, 2019

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
- [#706](https://github.com/plotly/dash-core-components/pull/706)
 - Upgraded plotly.js to [1.51.3](https://github.com/plotly/plotly.js/releases/tag/v1.51.3)

### Changed
- [#720](https://github.com/plotly/dash-core-components/pull/720)
 - `highlight.js` is now bundled into the package, and no longer sets the `window.hljs` variable. Similarly to how `plotly.js` is handled, it is overridden by a user-provided version if one exists.

## [1.6.0] - 2019-11-27
### Updated
- Upgraded plotly.js to 1.51.2 [#708](https://github.com/plotly/dash-core-components/pull/708)
Expand Down

4 changes: 3 additions & 1 deletion
babel.config.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,7 +4,9 @@ const presets = [
];

const plugins = [
 '@babel/plugin-syntax-dynamic-import'
 '@babel/plugin-syntax-dynamic-import',
 '@babel/plugin-transform-async-to-generator',
 '@babel/plugin-transform-runtime'
];

// eslint-disable-next-line no-process-env
Expand Down

5 changes: 1 addition & 4 deletions
dash_core_components_base/__init__.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,6 +43,7 @@
 'datepicker',
 'dropdown',
 'graph',
 'highlight',
 'markdown',
 'upload'
]
Expand DownExpand Up@@ -70,10 +71,6 @@
 } for async_resource in async_resources])

_js_dist.extend([
 {
 'relative_package_path': 'highlight.pack.js',
 'namespace': 'dash_core_components'
 },
@Marc-Andre-RivetMarc-Andre-RivetDec 17, 2019•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉
 {
 'relative_package_path': '{}.min.js'.format(__name__),
 'external_url': (
Expand Down

2 changes: 0 additions & 2 deletions
dash_core_components_base/highlight.pack.js

View file


Open in desktop


This file was deleted.


245 changes: 240 additions & 5 deletions
package-lock.json

View file


Open in desktop


Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.


3 changes: 3 additions & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -37,6 +37,7 @@
 "dependencies": {
 "color": "^3.1.0",
 "fast-isnumeric": "^1.1.3",
 "highlight.js": "^9.17.1",
 "moment": "^2.20.1",
 "plotly.js": "1.51.3",
 "prop-types": "^15.6.0",
Expand All@@ -57,6 +58,8 @@
 "@babel/core": "^7.4.0",
 "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
 "@babel/plugin-syntax-dynamic-import": "^7.2.0",
 "@babel/plugin-transform-async-to-generator": "^7.7.4",
 "@babel/plugin-transform-runtime": "^7.7.6",
 "@babel/preset-env": "^7.4.1",
 "@babel/preset-react": "^7.0.0",
 "@plotly/dash-component-plugins": "^1.0.2",
Expand Down

20 changes: 13 additions & 7 deletions
src/fragments/Markdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,12 +2,18 @@ import React, {Component} from 'react';
import {type} from 'ramda';
import Markdown from 'react-markdown';

import MarkdownHighlighter from '../utils/MarkdownHighlighter';
import {propTypes, defaultProps} from '../components/Markdown.react';
import '../components/css/highlight.css';

export default class DashMarkdown extends Component {
 constructor(props) {
 super(props);

 if (MarkdownHighlighter.isReady !== true) {
 MarkdownHighlighter.isReady.then(() => {
 this.setState({});
 });
 }
 this.highlightCode = this.highlightCode.bind(this);
 this.dedent = this.dedent.bind(this);
 }
Expand All@@ -21,15 +27,15 @@ export default class DashMarkdown extends Component {
 }

 highlightCode() {
 if (!window.hljs) {
 // skip highlighting if highlight.js isn't found
 return;
 }
 if (this.mdContainer) {
 const nodes = this.mdContainer.querySelectorAll('pre code');

 for (let i = 0; i < nodes.length; i++) {
 window.hljs.highlightBlock(nodes[i]);
 if (MarkdownHighlighter.hljs) {
 for (let i = 0; i < nodes.length; i++) {
 MarkdownHighlighter.hljs.highlightBlock(nodes[i]);
 }
 } else {
 MarkdownHighlighter.loadhljs();
@Marc-Andre-RivetMarc-Andre-RivetDec 17, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the existing implementation does not take full advantage of the react-markdown ability to get its renderer overriden -- similarly to https://github.com/plotly/dash-core-components/pull/711/files#diff-5b56ed82805404e28302aef5147d04a2R129 it should be possible to hook up the highlight directly onto the code renderer and simplify this component / usage.
@Marc-Andre-RivetMarc-Andre-RivetDec 19, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue created: #724, will not be addressed as part of this PR.
 }
 }
 }
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Refactor markdown syntax highlighting.#720
 Merged

shammamah-zz
merged 17 commits into

from

Dec 20, 2019
 Merged


Refactor markdown syntax highlighting.
#720
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
9d9aa6e

Refactor markdown syntax highlighting.

Dec 17, 2019
103fcb5

Disable eslint error.

Dec 17, 2019
f679951

Merge branch 'dev' into 713-highlightjs

Dec 17, 2019
cc70aed

Fix formatting.

Dec 17, 2019
6c98c28

Fix naming and file locations.

Dec 17, 2019
f80bf28

Change MarkdownHighlighter to be an object.

Dec 17, 2019
b2893ed

Update CHANGELOG.

Dec 17, 2019
b679a6a

Add plugins for async functions.

Dec 18, 2019
dff9f8c

Remove github stylesheet.

Dec 19, 2019
6bad06d

Move highlight stylesheet import.

Dec 19, 2019
37d34eb

Merge branch 'dev' into 713-highlightjs

Dec 19, 2019
3ca7aa2

Update hljs lazy loading.

Dec 19, 2019
a3fb701

Add markdown highlighting test.

Dec 19, 2019
3ebf656

Move stylesheet import to highlight.js.

Dec 20, 2019
78aaeda

Add percy snapshot to test and fix window override test.

Dec 20, 2019
0fd28a0

Change assert to wait_for_text_to_equal.

Dec 20, 2019
a2ba931

Use click to trigger md render in test.

Dec 20, 2019

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
- [#706](https://github.com/plotly/dash-core-components/pull/706)
 - Upgraded plotly.js to [1.51.3](https://github.com/plotly/plotly.js/releases/tag/v1.51.3)

### Changed
- [#720](https://github.com/plotly/dash-core-components/pull/720)
 - `highlight.js` is now bundled into the package, and no longer sets the `window.hljs` variable. Similarly to how `plotly.js` is handled, it is overridden by a user-provided version if one exists.

## [1.6.0] - 2019-11-27
### Updated
- Upgraded plotly.js to 1.51.2 [#708](https://github.com/plotly/dash-core-components/pull/708)
Expand Down

4 changes: 3 additions & 1 deletion
babel.config.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,7 +4,9 @@ const presets = [
];

const plugins = [
 '@babel/plugin-syntax-dynamic-import'
 '@babel/plugin-syntax-dynamic-import',
 '@babel/plugin-transform-async-to-generator',
 '@babel/plugin-transform-runtime'
];

// eslint-disable-next-line no-process-env
Expand Down

5 changes: 1 addition & 4 deletions
dash_core_components_base/__init__.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,6 +43,7 @@
 'datepicker',
 'dropdown',
 'graph',
 'highlight',
 'markdown',
 'upload'
]
Expand DownExpand Up@@ -70,10 +71,6 @@
 } for async_resource in async_resources])

_js_dist.extend([
 {
 'relative_package_path': 'highlight.pack.js',
 'namespace': 'dash_core_components'
 },
@Marc-Andre-RivetMarc-Andre-RivetDec 17, 2019•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉
 {
 'relative_package_path': '{}.min.js'.format(__name__),
 'external_url': (
Expand Down

2 changes: 0 additions & 2 deletions
dash_core_components_base/highlight.pack.js

View file


Open in desktop


This file was deleted.


245 changes: 240 additions & 5 deletions
package-lock.json

View file


Open in desktop


Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.


3 changes: 3 additions & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -37,6 +37,7 @@
 "dependencies": {
 "color": "^3.1.0",
 "fast-isnumeric": "^1.1.3",
 "highlight.js": "^9.17.1",
 "moment": "^2.20.1",
 "plotly.js": "1.51.3",
 "prop-types": "^15.6.0",
Expand All@@ -57,6 +58,8 @@
 "@babel/core": "^7.4.0",
 "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
 "@babel/plugin-syntax-dynamic-import": "^7.2.0",
 "@babel/plugin-transform-async-to-generator": "^7.7.4",
 "@babel/plugin-transform-runtime": "^7.7.6",
 "@babel/preset-env": "^7.4.1",
 "@babel/preset-react": "^7.0.0",
 "@plotly/dash-component-plugins": "^1.0.2",
Expand Down

20 changes: 13 additions & 7 deletions
src/fragments/Markdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,12 +2,18 @@ import React, {Component} from 'react';
import {type} from 'ramda';
import Markdown from 'react-markdown';

import MarkdownHighlighter from '../utils/MarkdownHighlighter';
import {propTypes, defaultProps} from '../components/Markdown.react';
import '../components/css/highlight.css';

export default class DashMarkdown extends Component {
 constructor(props) {
 super(props);

 if (MarkdownHighlighter.isReady !== true) {
 MarkdownHighlighter.isReady.then(() => {
 this.setState({});
 });
 }
 this.highlightCode = this.highlightCode.bind(this);
 this.dedent = this.dedent.bind(this);
 }
Expand All@@ -21,15 +27,15 @@ export default class DashMarkdown extends Component {
 }

 highlightCode() {
 if (!window.hljs) {
 // skip highlighting if highlight.js isn't found
 return;
 }
 if (this.mdContainer) {
 const nodes = this.mdContainer.querySelectorAll('pre code');

 for (let i = 0; i < nodes.length; i++) {
 window.hljs.highlightBlock(nodes[i]);
 if (MarkdownHighlighter.hljs) {
 for (let i = 0; i < nodes.length; i++) {
 MarkdownHighlighter.hljs.highlightBlock(nodes[i]);
 }
 } else {
 MarkdownHighlighter.loadhljs();
@Marc-Andre-RivetMarc-Andre-RivetDec 17, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the existing implementation does not take full advantage of the react-markdown ability to get its renderer overriden -- similarly to https://github.com/plotly/dash-core-components/pull/711/files#diff-5b56ed82805404e28302aef5147d04a2R129 it should be possible to hook up the highlight directly onto the code renderer and simplify this component / usage.
@Marc-Andre-RivetMarc-Andre-RivetDec 19, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue created: #724, will not be addressed as part of this PR.
 }
 }
 }
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content

This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Refactor markdown syntax highlighting.#720
 Merged

shammamah-zz
merged 17 commits into

from

Dec 20, 2019
 Merged


Refactor markdown syntax highlighting.
#720
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


17 commits


Select commit
Hold shift + click to select a range
9d9aa6e

Refactor markdown syntax highlighting.

Dec 17, 2019
103fcb5

Disable eslint error.

Dec 17, 2019
f679951

Merge branch 'dev' into 713-highlightjs

Dec 17, 2019
cc70aed

Fix formatting.

Dec 17, 2019
6c98c28

Fix naming and file locations.

Dec 17, 2019
f80bf28

Change MarkdownHighlighter to be an object.

Dec 17, 2019
b2893ed

Update CHANGELOG.

Dec 17, 2019
b679a6a

Add plugins for async functions.

Dec 18, 2019
dff9f8c

Remove github stylesheet.

Dec 19, 2019
6bad06d

Move highlight stylesheet import.

Dec 19, 2019
37d34eb

Merge branch 'dev' into 713-highlightjs

Dec 19, 2019
3ca7aa2

Update hljs lazy loading.

Dec 19, 2019
a3fb701

Add markdown highlighting test.

Dec 19, 2019
3ebf656

Move stylesheet import to highlight.js.

Dec 20, 2019
78aaeda

Add percy snapshot to test and fix window override test.

Dec 20, 2019
0fd28a0

Change assert to wait_for_text_to_equal.

Dec 20, 2019
a2ba931

Use click to trigger md render in test.

Dec 20, 2019

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


4 changes: 4 additions & 0 deletions
CHANGELOG.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -17,6 +17,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
- [#706](https://github.com/plotly/dash-core-components/pull/706)
 - Upgraded plotly.js to [1.51.3](https://github.com/plotly/plotly.js/releases/tag/v1.51.3)

### Changed
- [#720](https://github.com/plotly/dash-core-components/pull/720)
 - `highlight.js` is now bundled into the package, and no longer sets the `window.hljs` variable. Similarly to how `plotly.js` is handled, it is overridden by a user-provided version if one exists.

## [1.6.0] - 2019-11-27
### Updated
- Upgraded plotly.js to 1.51.2 [#708](https://github.com/plotly/dash-core-components/pull/708)
Expand Down

4 changes: 3 additions & 1 deletion
babel.config.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,7 +4,9 @@ const presets = [
];

const plugins = [
 '@babel/plugin-syntax-dynamic-import'
 '@babel/plugin-syntax-dynamic-import',
 '@babel/plugin-transform-async-to-generator',
 '@babel/plugin-transform-runtime'
];

// eslint-disable-next-line no-process-env
Expand Down

5 changes: 1 addition & 4 deletions
dash_core_components_base/__init__.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -43,6 +43,7 @@
 'datepicker',
 'dropdown',
 'graph',
 'highlight',
 'markdown',
 'upload'
]
Expand DownExpand Up@@ -70,10 +71,6 @@
 } for async_resource in async_resources])

_js_dist.extend([
 {
 'relative_package_path': 'highlight.pack.js',
 'namespace': 'dash_core_components'
 },
@Marc-Andre-RivetMarc-Andre-RivetDec 17, 2019•

edited

Loading

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉
 {
 'relative_package_path': '{}.min.js'.format(__name__),
 'external_url': (
Expand Down

2 changes: 0 additions & 2 deletions
dash_core_components_base/highlight.pack.js

View file


Open in desktop


This file was deleted.


245 changes: 240 additions & 5 deletions
package-lock.json

View file


Open in desktop


Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.


3 changes: 3 additions & 0 deletions
package.json

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -37,6 +37,7 @@
 "dependencies": {
 "color": "^3.1.0",
 "fast-isnumeric": "^1.1.3",
 "highlight.js": "^9.17.1",
 "moment": "^2.20.1",
 "plotly.js": "1.51.3",
 "prop-types": "^15.6.0",
Expand All@@ -57,6 +58,8 @@
 "@babel/core": "^7.4.0",
 "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
 "@babel/plugin-syntax-dynamic-import": "^7.2.0",
 "@babel/plugin-transform-async-to-generator": "^7.7.4",
 "@babel/plugin-transform-runtime": "^7.7.6",
 "@babel/preset-env": "^7.4.1",
 "@babel/preset-react": "^7.0.0",
 "@plotly/dash-component-plugins": "^1.0.2",
Expand Down

20 changes: 13 additions & 7 deletions
src/fragments/Markdown.react.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -2,12 +2,18 @@ import React, {Component} from 'react';
import {type} from 'ramda';
import Markdown from 'react-markdown';

import MarkdownHighlighter from '../utils/MarkdownHighlighter';
import {propTypes, defaultProps} from '../components/Markdown.react';
import '../components/css/highlight.css';

export default class DashMarkdown extends Component {
 constructor(props) {
 super(props);

 if (MarkdownHighlighter.isReady !== true) {
 MarkdownHighlighter.isReady.then(() => {
 this.setState({});
 });
 }
 this.highlightCode = this.highlightCode.bind(this);
 this.dedent = this.dedent.bind(this);
 }
Expand All@@ -21,15 +27,15 @@ export default class DashMarkdown extends Component {
 }

 highlightCode() {
 if (!window.hljs) {
 // skip highlighting if highlight.js isn't found
 return;
 }
 if (this.mdContainer) {
 const nodes = this.mdContainer.querySelectorAll('pre code');

 for (let i = 0; i < nodes.length; i++) {
 window.hljs.highlightBlock(nodes[i]);
 if (MarkdownHighlighter.hljs) {
 for (let i = 0; i < nodes.length; i++) {
 MarkdownHighlighter.hljs.highlightBlock(nodes[i]);
 }
 } else {
 MarkdownHighlighter.loadhljs();
@Marc-Andre-RivetMarc-Andre-RivetDec 17, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the existing implementation does not take full advantage of the react-markdown ability to get its renderer overriden -- similarly to https://github.com/plotly/dash-core-components/pull/711/files#diff-5b56ed82805404e28302aef5147d04a2R129 it should be possible to hook up the highlight directly onto the code renderer and simplify this component / usage.
@Marc-Andre-RivetMarc-Andre-RivetDec 19, 2019

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue created: #724, will not be addressed as part of this PR.
 }
 }
 }
Expand Down
Loading