feat: 代码高亮

package-lock.json

@@ -10,6 +10,7 @@
         "@apollo/client": "^3.3.16",
         "classnames": "^2.2.6",
         "graphql": "^15.5.0",
+        "highlight.js": "^11.0.1",
         "next": "10.2.0",
         "postcss-import": "^14.0.1",
         "postcss-nested": "^5.0.5",
@@ -26,6 +27,7 @@
         "@types/autoprefixer": "^10.2.0",
         "@types/classnames": "^2.3.1",
         "@types/graphql": "^14.5.0",
+        "@types/highlight.js": "^10.1.0",
         "@types/postcss-import": "^12.0.0",
         "@types/postcss-nested": "^4.2.3",
         "@types/ramda": "^0.27.40",
@@ -2367,6 +2369,16 @@
         "graphql": "*"
       }
     },
+    "node_modules/@types/highlight.js": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@types/highlight.js/-/highlight.js-10.1.0.tgz",
+      "integrity": "sha512-77hF2dGBsOgnvZll1vymYiNUtqJ8cJfXPD6GG/2M0aLRc29PkvB7Au6sIDjIEFcSICBhCh2+Pyq6WSRS7LUm6A==",
+      "deprecated": "This is a stub types definition. highlight.js provides its own type definitions, so you do not need this installed.",
+      "dev": true,
+      "dependencies": {
+        "highlight.js": "*"
+      }
+    },
     "node_modules/@types/http-proxy-agent": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@types/http-proxy-agent/-/http-proxy-agent-2.0.2.tgz",
@@ -4896,6 +4908,14 @@
       "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==",
       "dev": true
     },
+    "node_modules/highlight.js": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.0.1.tgz",
+      "integrity": "sha512-EqYpWyTF2s8nMfttfBA2yLKPNoZCO33pLS4MnbXQ4hECf1TKujCt1Kq7QAdrio7roL4+CqsfjqwYj4tYgq0pJQ==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -11446,6 +11466,15 @@
         "graphql": "*"
       }
     },
+    "@types/highlight.js": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@types/highlight.js/-/highlight.js-10.1.0.tgz",
+      "integrity": "sha512-77hF2dGBsOgnvZll1vymYiNUtqJ8cJfXPD6GG/2M0aLRc29PkvB7Au6sIDjIEFcSICBhCh2+Pyq6WSRS7LUm6A==",
+      "dev": true,
+      "requires": {
+        "highlight.js": "*"
+      }
+    },
     "@types/http-proxy-agent": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@types/http-proxy-agent/-/http-proxy-agent-2.0.2.tgz",
@@ -13540,6 +13569,11 @@
         }
       }
     },
+    "highlight.js": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.0.1.tgz",
+      "integrity": "sha512-EqYpWyTF2s8nMfttfBA2yLKPNoZCO33pLS4MnbXQ4hECf1TKujCt1Kq7QAdrio7roL4+CqsfjqwYj4tYgq0pJQ=="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",

package.json

@@ -13,6 +13,7 @@
     "@apollo/client": "^3.3.16",
     "classnames": "^2.2.6",
     "graphql": "^15.5.0",
+    "highlight.js": "^11.0.1",
     "next": "10.2.0",
     "postcss-import": "^14.0.1",
     "postcss-nested": "^5.0.5",
@@ -29,6 +30,7 @@
     "@types/autoprefixer": "^10.2.0",
     "@types/classnames": "^2.3.1",
     "@types/graphql": "^14.5.0",
+    "@types/highlight.js": "^10.1.0",
     "@types/postcss-import": "^12.0.0",
     "@types/postcss-nested": "^4.2.3",
     "@types/ramda": "^0.27.40",

pages/_app.tsx

@@ -6,8 +6,7 @@ import styles from "./_app.module.css";
 import { ApolloProvider } from "@apollo/client";
 import { useApollo } from "../commons/graphql/client";
 import { ThemeProvider, useTheme } from '../commons/theme';
-import { SwitchTheme } from '../components/switch-theme';
+import { SwitchTheme } from "../components/switch-theme";
-import "./articles/article.css";
 
 function MyApp({ Component, pageProps }) {
   const apolloClient = useApollo(pageProps);

pages/articles/article.css

@@ -1,2 +0,0 @@
-.article {
-}

pages/articles/article.module.css

@@ -75,28 +75,286 @@
       }
     }
 
+    a {
+      @apply text-red-400 underline;
+
+      :global(.dark) & {
+        @apply text-green-500;
+      }
+      &:hover {
+        @apply filter saturate-200;
+      }
+    }
+
     code,
     pre {
       @apply font-mono rounded;
     }
 
-    code {
+    code:not(:global(.hljs)) {
       @apply p-1 text-red-500 bg-red-100;
       :global(.dark) & {
         @apply bg-green-800 bg-opacity-20 text-green-400;
       }
     }
 
-    pre {
+    :global {
-      @apply px-2 py-1 bg-yellow-900 bg-opacity-5 overflow-x-auto;
+      :not(:global(.dark)) & {
-      :global(.dark) & {
+        pre code.hljs {
-        @apply bg-green-800 bg-opacity-20;
+          display: block;
-      }
+          overflow-x: auto;
-      code {
+          padding: 1em;
-        @apply text-current bg-transparent;
+        }
 
-        :global(.dark) & {
+        code.hljs {
-          @apply text-current bg-transparent;
+          padding: 3px 5px;
+        }
+
+        .hljs {
+          color: #68615e;
+          background: #f1efee;
+        }
+
+        .hljs ::selection {
+          color: #a8a19f;
+        }
+
+        /* purposely do not highlight these things */
+        .hljs-formula,
+        .hljs-params,
+        .hljs-property {
+        }
+
+        /* base03 - #9c9491 -  Comments, Invisibles, Line Highlighting */
+        .hljs-comment {
+          color: #9c9491;
+        }
+
+        /* base04 - #766e6b -  Dark Foreground (Used for status bars) */
+        .hljs-tag {
+          color: #766e6b;
+        }
+
+        /* base05 - #68615e -  Default Foreground, Caret, Delimiters, Operators */
+        .hljs-subst,
+        .hljs-punctuation,
+        .hljs-operator {
+          color: #68615e;
+        }
+
+        .hljs-operator {
+          opacity: 0.7;
+        }
+
+        /* base08 - Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted */
+        .hljs-bullet,
+        .hljs-variable,
+        .hljs-template-variable,
+        .hljs-selector-tag,
+        .hljs-name,
+        .hljs-deletion {
+          color: #f22c40;
+        }
+
+        /* base09 - Integers, Boolean, Constants, XML Attributes, Markup Link Url */
+        .hljs-symbol,
+        .hljs-number,
+        .hljs-link,
+        .hljs-attr,
+        .hljs-variable.constant_,
+        .hljs-literal {
+          color: #df5320;
+        }
+
+        /* base0A - Classes, Markup Bold, Search Text Background */
+        .hljs-title,
+        .hljs-class .hljs-title,
+        .hljs-title.class_ {
+          color: #c38418;
+        }
+
+        .hljs-strong {
+          font-weight: bold;
+          color: #c38418;
+        }
+
+        /* base0B - Strings, Inherited Class, Markup Code, Diff Inserted */
+        .hljs-code,
+        .hljs-addition,
+        .hljs-title.class_.inherited__,
+        .hljs-string {
+          color: #7b9726;
+        }
+
+        /* base0C - Support, Regular Expressions, Escape Characters, Markup Quotes */
+        .hljs-built_in,
+        .hljs-doctag,
+        .hljs-quote,
+        .hljs-keyword.hljs-atrule,
+        .hljs-regexp {
+          color: #3d97b8;
+        }
+
+        /* base0D - Functions, Methods, Attribute IDs, Headings */
+        .hljs-function .hljs-title,
+        .hljs-attribute,
+        .ruby .hljs-property,
+        .hljs-title.function_,
+        .hljs-section {
+          color: #407ee7;
+        }
+
+        /* base0E - Keywords, Storage, Selector, Markup Italic, Diff Changed */
+        .hljs-type,
+        .hljs-template-tag,
+        .diff .hljs-meta,
+        .hljs-keyword {
+          color: #6666ea;
+        }
+        .hljs-emphasis {
+          color: #6666ea;
+          font-style: italic;
+        }
+
+        /* base0F - Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?> */
+        .hljs-meta,
+        .hljs-meta .hljs-keyword,
+        .hljs-meta .hljs-string {
+          color: #c33ff3;
+        }
+
+        .hljs-meta .hljs-keyword,
+        .hljs-meta-keyword {
+          font-weight: bold;
+        }
+      }
+      :global(.dark) & {
+        pre code.hljs {
+          display: block;
+          overflow-x: auto;
+          padding: 1em;
+        }
+
+        code.hljs {
+          padding: 3px 5px;
+        }
+
+        .hljs {
+          color: #929181;
+          background: #22221b;
+        }
+
+        .hljs ::selection {
+          color: #5f5e4e;
+        }
+
+        /* purposely do not highlight these things */
+        .hljs-formula,
+        .hljs-params,
+        .hljs-property {
+        }
+
+        /* base03 - #6c6b5a -  Comments, Invisibles, Line Highlighting */
+        .hljs-comment {
+          color: #6c6b5a;
+        }
+
+        /* base04 - #878573 -  Dark Foreground (Used for status bars) */
+        .hljs-tag {
+          color: #878573;
+        }
+
+        /* base05 - #929181 -  Default Foreground, Caret, Delimiters, Operators */
+        .hljs-subst,
+        .hljs-punctuation,
+        .hljs-operator {
+          color: #929181;
+        }
+
+        .hljs-operator {
+          opacity: 0.7;
+        }
+
+        /* base08 - Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted */
+        .hljs-bullet,
+        .hljs-variable,
+        .hljs-template-variable,
+        .hljs-selector-tag,
+        .hljs-name,
+        .hljs-deletion {
+          color: #ba6236;
+        }
+
+        /* base09 - Integers, Boolean, Constants, XML Attributes, Markup Link Url */
+        .hljs-symbol,
+        .hljs-number,
+        .hljs-link,
+        .hljs-attr,
+        .hljs-variable.constant_,
+        .hljs-literal {
+          color: #ae7313;
+        }
+
+        /* base0A - Classes, Markup Bold, Search Text Background */
+        .hljs-title,
+        .hljs-class .hljs-title,
+        .hljs-title.class_ {
+          color: #a5980d;
+        }
+
+        .hljs-strong {
+          font-weight: bold;
+          color: #a5980d;
+        }
+
+        /* base0B - Strings, Inherited Class, Markup Code, Diff Inserted */
+        .hljs-code,
+        .hljs-addition,
+        .hljs-title.class_.inherited__,
+        .hljs-string {
+          color: #7d9726;
+        }
+
+        /* base0C - Support, Regular Expressions, Escape Characters, Markup Quotes */
+        .hljs-built_in,
+        .hljs-doctag, /* guessing */
+        .hljs-quote,
+        .hljs-keyword.hljs-atrule,
+        .hljs-regexp {
+          color: #5b9d48;
+        }
+
+        /* base0D - Functions, Methods, Attribute IDs, Headings */
+        .hljs-function .hljs-title,
+        .hljs-attribute,
+        .ruby .hljs-property,
+        .hljs-title.function_,
+        .hljs-section {
+          color: #36a166;
+        }
+
+        /* base0E - Keywords, Storage, Selector, Markup Italic, Diff Changed */
+        .hljs-type,
+        .hljs-template-tag,
+        .diff .hljs-meta,
+        .hljs-keyword {
+          color: #5f9182;
+        }
+        .hljs-emphasis {
+          color: #5f9182;
+          font-style: italic;
+        }
+
+        /* base0F - Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?> */
+        .hljs-meta,
+        .hljs-meta .hljs-keyword,
+        .hljs-meta .hljs-string {
+          color: #9d6c7c;
+        }
+
+        .hljs-meta .hljs-keyword,
+        .hljs-meta-keyword {
+          font-weight: bold;
         }
       }
     }
@@ -106,8 +364,9 @@
 .articleEnd {
   @apply text-center text-gray-400 text-sm my-6;
 
-  &:before, &:after {
+  &:before,
-    content: '※';
+  &:after {
+    content: "※";
     @apply mx-4 text-xs align-text-top;
   }
 }

styles/globals.css

@@ -0,0 +1,3 @@
+* {
+  @apply transition-colors;
+}