prismjs integration

Author: athiththan11

gatsby-browser.js

@@ -9,5 +9,6 @@ import './src/styles/style.scss'
 
 import './src/styles/reveal/reveal.css'
 import './src/styles/reveal/theme/simple.scss'
+import 'prismjs/themes/prism-tomorrow.css'
 
 export const wrapRootElement = wrap

gatsby-config.js

@@ -124,6 +124,16 @@ module.exports = {
       resolve: `gatsby-transformer-remark`,
       options: {
         plugins: [
+          {
+            resolve: 'gatsby-remark-prismjs',
+            options: {
+              inlineCodeMarker: null,
+              aliases: {
+                log: 'log',
+                sh: 'shell',
+              },
+            },
+          },
           {
             resolve: 'sc-remark-reveal-mutate',
           },

package-lock.json renamed to npm-shrinkwrap.json

@@ -37,6 +37,7 @@
 		"gatsby-remark-copy-linked-files": "^2.10.0",
 		"gatsby-remark-embed-gist": "^1.2.1",
 		"gatsby-remark-images": "^3.11.1",
+		"gatsby-remark-prismjs": "^3.8.0",
 		"gatsby-remark-responsive-iframe": "^2.11.0",
 		"gatsby-remark-slidify": "0.0.2",
 		"gatsby-remark-smartypants": "^2.10.0",
@@ -46,6 +47,7 @@
 		"lodash": "^4.17.21",
 		"mdx-utils": "^0.2.0",
 		"prism-react-renderer": "^0.1.5",
+		"prismjs": "^1.23.0",
 		"react": "^16.14.0",
 		"react-dom": "^16.14.0",
 		"react-feather": "^2.0.9",

package.json

@@ -2,3 +2,17 @@ pre[class*='language-'] {
   padding: 2em;
   border-radius: 0.75em;
 }
+
+// reveal prism
+
+.reveal {
+  :not(pre) > code[class*='language-text'],
+  pre[class*='language-text'] {
+    background: unset !important;
+  }
+
+  code[class*='language-text'],
+  pre[class*='language-text'] {
+    color: #e83e8c !important;
+  }
+}

src/styles/_prism.scss

@@ -84,6 +84,23 @@ html.deactivate-reveal {
 
 .reveal code {
   tab-size: unset;
+
+  &::-webkit-scrollbar{
+    height: 0rem;
+    width: 0rem;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: unset !important;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #6c757d24;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #6c757d24;
+  }
 }
 
 // .reveal .controls .controls-arrow:after {

src/styles/reveal/theme/simple.scss

@@ -17,6 +17,7 @@ const components = {
     }
   },
 }
+
 export const wrapRootElement = ({ element }) => (
   <MDXProvider components={components}>{element}</MDXProvider>
 )