Default to dracula Prism theme and add instructions for adding highli…

…ghted languages
bensmithett · Jul 18, 2021 · d32e7de · d32e7de
1 parent 7df21d3
commit d32e7de
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tropical",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "dependencies": {
     "@babel/core": "^7.14.6",
     "@mdx-js/mdx": "^1.6.22",

diff --git a/src/components/TropicalCodeBlock/TropicalCodeBlock.jsx b/src/components/TropicalCodeBlock/TropicalCodeBlock.jsx
@@ -1,11 +1,21 @@
 import React from 'react'
 import Highlight, { defaultProps } from 'prism-react-renderer'
+import dracula from 'prism-react-renderer/themes/dracula'
+
+/* 
+To add language support outside the subset that comes with prism-react-renderer
+https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js
+
+import Prism from 'prism-react-renderer/prism';
+;(typeof global !== 'undefined' ? global : window).Prism = Prism
+import 'prismjs/components/prism-ruby'
+*/
 
 export function TropicalCodeBlock({ children, className }) {
   const language = className?.replace(/language-/, '')
 
   return (
-    <Highlight {...defaultProps} code={children.trim()} language={language}>
+    <Highlight {...defaultProps} code={children.trim()} language={language} theme={dracula}>
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <pre className={className} style={{ ...style, padding: '20px', fontSize: '0.9rem', overflow: 'auto' }}>
           {tokens.map((line, i) => (