Add syntax highlighting example

github · Oct 18, 2020 · 12cecee · 12cecee
1 parent 2b6de0d
commit 12cecee
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 4 deletions.
diff --git a/content/github/getting-started-with-github/access-permissions-on-github.md b/content/github/getting-started-with-github/access-permissions-on-github.md
@@ -18,7 +18,7 @@ A repository owned by a user account has two permission levels: the *repository
 
 ### Organization accounts
 <!--react-->
-<CodeBlock>
+<CodeBlock language="javascript">
 {`var i;
 for (i = 0; i < cars.length; i++) {
   text += cars[i] + "<br>";

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -69,6 +69,7 @@
     "querystring": "^0.2.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
+    "react-syntax-highlighter": "^15.2.1",
     "readline-sync": "^1.4.10",
     "resolve-url-loader": "^3.1.1",
     "rimraf": "^3.0.0",

diff --git a/react/CodeBlock.js b/react/CodeBlock.js
@@ -1,11 +1,13 @@
 const React = require('react')
 const ReactDOM = require('react-dom')
+const { Prism } = require('react-syntax-highlighter')
+const { dark } = require('react-syntax-highlighter/dist/cjs/styles/prism')
 
 const CodeBlock = (props) => {
   return (
-    <pre>
+    <Prism language={props.language} style={dark}>
       {props.children}
-    </pre>
+    </Prism>
   )
 }
 
@@ -14,7 +16,8 @@ if (typeof window === 'undefined') {
   const componentContainers = document.querySelectorAll('.react-component-codeblock')
 
   for (const componentContainer of componentContainers) {
-    ReactDOM.render(React.createElement(CodeBlock, {}, componentContainer.children[0].innerText), componentContainer)
+    // clientside rendering breaks the syntax highlighting so turned it off... since this is not an interactive component
+    //ReactDOM.render(React.createElement(CodeBlock, {}, componentContainer.children[0].innerText), componentContainer)
   }
 }