Fix syntax coloring and light/dark theme switching

mavryk-network · Jun 13, 2022 · 82857ca · 82857ca
1 parent 9e39cb2
commit 82857ca
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/gitlab-pages/website/core/CodeExamples.js b/gitlab-pages/website/core/CodeExamples.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Highlight, { defaultProps } from "prism-react-renderer";
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import Prism from './PrismLigoSyntaxes'
 import useThemeContext from '@theme/hooks/useThemeContext';
 import defaultTheme from 'prism-react-renderer/themes/palenight';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

diff --git a/gitlab-pages/website/core/PrismLigoSyntaxes.js b/gitlab-pages/website/core/PrismLigoSyntaxes.js
@@ -1,5 +1,22 @@
+import useThemeContext from '@theme/hooks/useThemeContext';
+import defaultTheme from 'prism-react-renderer/themes/palenight';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
 const {Prism} = require("prism-react-renderer");
 
+export const GetTheme = () => {
+  const {
+    siteConfig: {
+      themeConfig: {prism = {}},
+    },
+  } = useDocusaurusContext();
+  const {isDarkTheme} = useThemeContext();
+  const lightModeTheme = prism.theme || defaultTheme;
+  const darkModeTheme = prism.darkTheme || lightModeTheme;
+
+  return isDarkTheme ?  darkModeTheme : lightModeTheme;
+}
+
 // TODO : What's a better way to extend the Prism library with these syntaxes ?
 
 Prism.languages = {

diff --git a/gitlab-pages/website/src/pages/faq.js b/gitlab-pages/website/src/pages/faq.js
@@ -2,11 +2,8 @@ import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import Layout from '@theme/Layout';
 import Highlight, { defaultProps } from "prism-react-renderer";
-import defaultTheme from 'prism-react-renderer/themes/palenight';
-import Prism from '../../core/PrismLigoSyntaxes'
+import Prism, {GetTheme} from '../../core/PrismLigoSyntaxes'
 
-// TODO : Add light / dark theme instead of default one
-// TODO : Make Ligo syntaxes highlighting work in Markdown code block
 // TODO : Add filtering-by-tag function
 
 const QUESTIONS = [
@@ -87,7 +84,7 @@ const Question = ({question, answer, tags}) => (
             const language = match[1]
             const code = children[0]
             return (
-              <Highlight {...defaultProps} code={code} language={language} style={defaultTheme}>
+              <Highlight {...defaultProps} code={code} language={language} theme={GetTheme()}>
                 {/* This function was taken directly from the prism-react-renderer Github page README */}
                 {({ className, style, tokens, getLineProps, getTokenProps }) => (
                   <pre className={className} style={style}>

diff --git a/gitlab-pages/website/src/pages/index.js b/gitlab-pages/website/src/pages/index.js
@@ -2,7 +2,6 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import CodeExamples from '../../core/CodeExamples';
-import Prism from '../../core/PrismLigoSyntaxes'
 
 const FEATURES = [
   {