Improve code block styles for website

slab · Dec 9, 2023 · a5075c7 · a5075c7
1 parent fd29b74
commit a5075c7
Show file tree

Hide file tree

Showing 7 changed files with 327 additions and 175 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/website/package.json b/packages/website/package.json
@@ -36,7 +36,7 @@
     "gatsby-remark-prismjs": "6.24.0",
     "gatsby-source-filesystem": "4.24.0",
     "http-proxy": "^1.18.1",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.3.0",
     "prismjs": "^1.29.0",
     "sass": "^1.55.0"
   }

diff --git a/packages/website/root-wrapper.js b/packages/website/root-wrapper.js
@@ -1,5 +1,5 @@
 import { MDXProvider } from '@mdx-js/react';
-import Highlight, { defaultProps } from 'prism-react-renderer';
+import { Highlight, themes, defaultProps } from 'prism-react-renderer';
 import CodePen from './src/components/CodePen';
 import Editor from './src/components/Editor';
 import {

diff --git a/packages/website/src/templates/doc.jsx b/packages/website/src/templates/doc.jsx
@@ -1,22 +1,22 @@
-import { useLocation } from "@reach/router";
-import classNames from "classnames";
-import { graphql } from "gatsby";
-import SEO from "../components/SEO";
-import docsItems from "../data/docs";
-import guideItems from "../data/guides";
-import OctocatIcon from "../svg/octocat.svg";
-import slug from "../utils/slug";
-import Default from "../components/Default";
-import OpenSource from "../components/OpenSource";
-import React, { useEffect } from "react";
-import * as styles from "./doc.module.scss";
+import { useLocation } from '@reach/router';
+import classNames from 'classnames';
+import { graphql } from 'gatsby';
+import SEO from '../components/SEO';
+import docsItems from '../data/docs';
+import guideItems from '../data/guides';
+import OctocatIcon from '../svg/octocat.svg';
+import slug from '../utils/slug';
+import Default from '../components/Default';
+import OpenSource from '../components/OpenSource';
+import React, { useEffect } from 'react';
+import * as styles from './doc.module.scss';
 
 const getPagination = (permalink, items) => {
   const flattenedItems = [];
 
   const flatItems = (i) => {
     i.forEach((child) => {
-      if (child.url.includes("#")) return;
+      if (child.url.includes('#')) return;
       flattenedItems.push(child);
       if (child.children) {
         flatItems(child.children);
@@ -58,16 +58,16 @@ const SidebarItem = ({ item }) => {
 const Doc = ({ data, children }) => {
   const { title } = data.mdx.frontmatter;
   const { permalink, pageType } = data.mdx.fields;
-  const category = pageType === "guides" ? "Guides" : "Documentation";
+  const category = pageType === 'guides' ? 'Guides' : 'Documentation';
 
-  const items = pageType === "guides" ? guideItems : docsItems;
+  const items = pageType === 'guides' ? guideItems : docsItems;
   const { prev, next } = getPagination(permalink, items);
 
   useEffect(() => {
     docsearch({
-      apiKey: "281facf513620e95600126795a00ab6c",
-      indexName: "quilljs",
-      inputSelector: ".search-item input",
+      apiKey: '281facf513620e95600126795a00ab6c',
+      indexName: 'quilljs',
+      inputSelector: '.search-item input',
       debug: false,
     });
   }, []);
@@ -88,7 +88,7 @@ const Doc = ({ data, children }) => {
             </ul>
           </div>
           <div id="docs-container" className="nine columns">
-            <div className={classNames("row", styles.breadcrumbRow)}>
+            <div className={classNames('row', styles.breadcrumbRow)}>
               <div className={styles.breadcrumb}>
                 <span>{category}:</span>
                 <span>{title}</span>
@@ -104,10 +104,10 @@ const Doc = ({ data, children }) => {
               </a>
             </div>
             <hr />
-            <div id="content-container">
+            <article id="content-container" className={styles.content}>
               <h1 id={slug(title)}>{title}</h1>
               {children}
-            </div>
+            </article>
             <div className="row" id="pagination-container">
               {prev && (
                 <a className="prev" href={prev.url}>

diff --git a/packages/website/src/templates/doc.module.scss b/packages/website/src/templates/doc.module.scss
@@ -13,7 +13,7 @@
 
   .editLink {
     margin-left: auto;
-    font-family: "Sofia Pro", sans-serif;
+    font-family: 'Sofia Pro', sans-serif;
     font-size: 1.08rem;
     font-weight: bold;
     height: 2.5em;
@@ -30,3 +30,17 @@
     width: 2.5em;
   }
 }
+
+.content {
+  code {
+    background: #f1f1f1;
+  }
+
+  pre {
+    border-radius: 2px;
+
+    code {
+      background: transparent;
+    }
+  }
+}