Merge pull request #562 from plotly/markdown-highlight

Native syntax highlighting in dcc.Markdown

NAMESPACE

@@ -18,7 +18,6 @@ export(dccRadioItems)
 export(dccRangeSlider)
 export(dccSlider)
 export(dccStore)
-export(dccSyntaxHighlighter)
 export(dccTab)
 export(dccTabs)
 export(dccTextarea)

dash_core_components/__init__.py

@@ -46,6 +46,10 @@
         'relative_package_path': 'plotly-1.47.0.min.js',
         'namespace': 'dash_core_components'
     },
+    {
+        'relative_package_path': 'highlight.pack.js',
+        'namespace': 'dash_core_components'
+    },
     {
         'relative_package_path': '{}.min.js'.format(__name__),
         'external_url': (

dash_core_components/_imports_.py

@@ -16,7 +16,6 @@
 from .RangeSlider import RangeSlider
 from .Slider import Slider
 from .Store import Store
-from .SyntaxHighlighter import SyntaxHighlighter
 from .Tab import Tab
 from .Tabs import Tabs
 from .Textarea import Textarea
@@ -41,7 +40,6 @@
     "RangeSlider",
     "Slider",
     "Store",
-    "SyntaxHighlighter",
     "Tab",
     "Tabs",
     "Textarea",

dash_core_components/highlight.css

@@ -0,0 +1,150 @@
+/**
+ * Default styles
+ */
+.hljs {
+    display: block;
+    padding: 0.5em;
+    overflow-x: auto;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+/**
+ * Light theme styles
+ * Light theme from react-syntax-highlighter 'arduino-light'
+ * https://github.com/conorhastings/react-syntax-highlighter/blob/master/src/styles/hljs/arduino-light.js
+ */
+.hljs {
+    background: #FFFFFF;
+    color: #434f54;
+}
+
+.hljs-comment {
+    color: rgba(149,165,166,.8);
+}
+
+.hljs-built_in,
+.hljs-literal,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+  color: #D35400;
+}
+
+.hljs-meta-keyboard,
+.hljs-function {
+    color: #728E00;
+}
+
+.hljs-meta {
+    color: #434f54;
+}
+
+.hljs-type,
+.hljs-string,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+  color: #005C5F;
+}
+
+.hljs-title,
+.hljs-section {
+  color: #880000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-attribute,
+.hljs-tag,
+.hljs-doctag,
+.hljs-name,
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-selector-psuedo {
+  color: #00979D;
+}
+
+.hljs-subst {
+    color: #434f54;
+}
+
+.hljs-number {
+    color: #8A7B52;
+}
+
+/**
+ * Dark theme styles
+ * Dark theme from react-syntax-highlighter 'monokai'
+ * https://github.com/conorhastings/react-syntax-highlighter/blob/master/src/styles/hljs/monokai.js
+ */
+.hljs-dark .hljs {
+    background: #272822;
+    color: #ddd;
+}
+
+.hljs-dark .hljs-tag,
+.hljs-dark .hljs-keyword,
+.hljs-dark .hljs-selector-tag,
+.hljs-dark .hljs-literal,
+.hljs-dark .hljs-strong,
+.hljs-dark .hljs-name {
+    color: #f92672;
+}
+
+.hljs-dark .hljs-code {
+    color: #66d9ef;
+}
+
+.hljs-dark .hljs-class .hljs-title {
+    color: #ffffff;
+}
+
+.hljs-dark .hljs-attribute,
+.hljs-dark .hljs-symbol,
+.hljs-dark .hljs-regexp,
+.hljs-dark .hljs-link {
+    color: #bf79db;
+}
+
+.hljs-dark .hljs-string,
+.hljs-dark .hljs-bullet,
+.hljs-dark .hljs-subst,
+.hljs-dark .hljs-title,
+.hljs-dark .hljs-section,
+.hljs-dark .hljs-emphasis,
+.hljs-dark .hljs-type,
+.hljs-dark .hljs-built_in,
+.hljs-dark .hljs-builtin-name,
+.hljs-dark .hljs-selector-attr,
+.hljs-dark .hljs-selector-pseudo,
+.hljs-dark .hljs-addition,
+.hljs-dark .hljs-variable,
+.hljs-dark .hljs-template-tag,
+.hljs-dark .hljs-template-variable {
+    color: #a6e22e;
+}
+
+.hljs-dark .hljs-comment,
+.hljs-dark .hljs-quote,
+.hljs-dark .hljs-deletion,
+.hljs-dark .hljs-meta {
+    color: #75715e;
+}
+
+.hljs-dark .hljs-doctag,
+.hljs-dark .hljs-selector-id {
+    font-weight: bold;
+}

demo/Demo.react.js

@@ -10,7 +10,6 @@ import {
     RadioItems,
     RangeSlider,
     Slider,
-    SyntaxHighlighter,
     Interval,
     Markdown,
     Upload
@@ -91,39 +90,6 @@ ReactDOM.render(<Controller/>, mountNode);
 `;
 
 
-const SyntaxHighlighterExample = `
-const properties = {
-    language: 'python',
-    theme: 'light',
-    customStyle: {},
-    codeTagProps: {},
-    useInlineStyles: true,
-    showLineNumbers: false,
-    startingLineNumber: 0,
-    lineNumberContainerStyle: {},
-    lineNumberStyle: {},
-    wrapLines: false,
-    lineStyle: {},
-    children: \`import Dash
-dash.layout = Div([
-    Graph(figure={'data': [{'x': [1, 2, 3]}]})
-]);
-
-def update_graph(lahlah):
-	return dict(updates=lahlah)
-
-<html>
-
-</html>
-function thisIsJavascript(test) {
-    console.log({test: that});
-}
-\`
-}
-
-ReactDOM.render(<SyntaxHighlighter {...properties}/>, mountNode);
-`
-
 const DropdownExample = `
 const properties = {
     id: 'my dropdown',
@@ -332,7 +298,6 @@ const examples = [
     {name: 'Markdown', code: MarkdownExample},
     {name: 'Interval', code: SetTimeoutExample},
     {name: 'Graph', code: GraphExample},
-    {name: 'SyntaxHighlighter', code: SyntaxHighlighterExample},
     {name: 'Radio', code: RadioExample},
     {name: 'Checklist', code: ChecklistExample},
     {name: 'Dropdown', code: DropdownExample},
@@ -353,7 +318,7 @@ class Demo extends Component {
                             <h3>{example.name}</h3>
                             <Playground
                                 codeText={example.code}
-                                scope={{Component, React, ReactDOM, Checklist, DatePickerRange, Dropdown, Graph, Input, RadioItems, RangeSlider, Slider, SyntaxHighlighter, Interval, Markdown, Upload}}
+                                scope={{Component, React, ReactDOM, Checklist, DatePickerRange, Dropdown, Graph, Input, RadioItems, RangeSlider, Slider, Interval, Markdown, Upload}}
                                 noRender={false}
                                 theme={'xq-light'}
                             />