feat: add highlight syntax for code (issue octokatherine#294)

DomeT99 · Aug 30, 2024 · 15f3e63 · 15f3e63
1 parent 2018bb2
commit 15f3e63
Show file tree

Hide file tree

Showing 4 changed files with 279 additions and 1 deletion.
diff --git a/components/EditPreviewContainer.js b/components/EditPreviewContainer.js
@@ -81,6 +81,7 @@ const EditPreviewContainer = ({
             selectedSectionSlugs={selectedSectionSlugs}
             getTemplate={getTemplate}
             selectedTab={selectedTab}
+            darkMode={darkMode}
           />
         </div>
       ) : null}

diff --git a/components/PreviewColumn.js b/components/PreviewColumn.js
@@ -2,9 +2,11 @@ import ReactMarkdown from 'react-markdown'
 
 import { TAB } from '../utils/constants'
 import RawPreview from './RawPreview'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { oneDark, oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism'
 
 const gfm = require('remark-gfm')
-export const PreviewColumn = ({ selectedSectionSlugs, getTemplate, selectedTab }) => {
+export const PreviewColumn = ({ selectedSectionSlugs, getTemplate, selectedTab, darkMode }) => {
   selectedSectionSlugs = [...new Set(selectedSectionSlugs)]
   const markdown = selectedSectionSlugs.reduce((acc, section) => {
     const template = getTemplate(section)
@@ -33,6 +35,13 @@ export const PreviewColumn = ({ selectedSectionSlugs, getTemplate, selectedTab }
                 {props.children}
               </a>
             ),
+            code: ({ language, value, darkMode }) => (
+              <SyntaxHighlighter
+                style={darkMode ? oneDark : oneLight}
+                language={language}
+                children={value}
+              />
+            ),
           }}
         />
       ) : (