From 6492223f7382df462f0386515cce5cac5c0169a2 Mon Sep 17 00:00:00 2001 From: Ivan Li Date: Sat, 3 Jul 2021 11:25:14 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=A3=E7=A0=81=E9=AB=98=E4=BA=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 34 ++++ package.json | 2 + pages/_app.tsx | 3 +- pages/articles/article.css | 2 - pages/articles/article.module.css | 285 ++++++++++++++++++++++++++++-- styles/globals.css | 3 + 6 files changed, 312 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index fbac027..57baa6a 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 1b19668..0fb699d 100644 --- a/package.json +++ b/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", diff --git a/pages/_app.tsx b/pages/_app.tsx index 6a3a8c5..08c0459 100644 --- a/pages/_app.tsx +++ b/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 "./articles/article.css"; +import { SwitchTheme } from "../components/switch-theme"; function MyApp({ Component, pageProps }) { const apolloClient = useApollo(pageProps); diff --git a/pages/articles/article.css b/pages/articles/article.css index 7d72d52..e69de29 100644 --- a/pages/articles/article.css +++ b/pages/articles/article.css @@ -1,2 +0,0 @@ -.article { -} diff --git a/pages/articles/article.module.css b/pages/articles/article.module.css index a601942..db70ce6 100644 --- a/pages/articles/article.module.css +++ b/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 { - @apply px-2 py-1 bg-yellow-900 bg-opacity-5 overflow-x-auto; - :global(.dark) & { - @apply bg-green-800 bg-opacity-20; - } - code { - @apply text-current bg-transparent; + :global { + :not(:global(.dark)) & { + pre code.hljs { + display: block; + overflow-x: auto; + padding: 1em; + } - :global(.dark) & { - @apply text-current bg-transparent; + code.hljs { + 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. */ + .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. */ + .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 { - content: '※'; + &:before, + &:after { + content: "※"; @apply mx-4 text-xs align-text-top; } -} \ No newline at end of file +} diff --git a/styles/globals.css b/styles/globals.css index e69de29..b60fe43 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -0,0 +1,3 @@ +* { + @apply transition-colors; +} \ No newline at end of file