feat: 代码高亮
This commit is contained in:
Ivan Li
parent
b1fcee8e4e
commit
6492223f73
34
package-lock.json
generated
34
package-lock.json
generated
@ -10,6 +10,7 @@
|
|||||||
"@apollo/client": "^3.3.16",
|
"@apollo/client": "^3.3.16",
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"graphql": "^15.5.0",
|
"graphql": "^15.5.0",
|
||||||
|
"highlight.js": "^11.0.1",
|
||||||
"next": "10.2.0",
|
"next": "10.2.0",
|
||||||
"postcss-import": "^14.0.1",
|
"postcss-import": "^14.0.1",
|
||||||
"postcss-nested": "^5.0.5",
|
"postcss-nested": "^5.0.5",
|
||||||
@ -26,6 +27,7 @@
|
|||||||
"@types/autoprefixer": "^10.2.0",
|
"@types/autoprefixer": "^10.2.0",
|
||||||
"@types/classnames": "^2.3.1",
|
"@types/classnames": "^2.3.1",
|
||||||
"@types/graphql": "^14.5.0",
|
"@types/graphql": "^14.5.0",
|
||||||
|
"@types/highlight.js": "^10.1.0",
|
||||||
"@types/postcss-import": "^12.0.0",
|
"@types/postcss-import": "^12.0.0",
|
||||||
"@types/postcss-nested": "^4.2.3",
|
"@types/postcss-nested": "^4.2.3",
|
||||||
"@types/ramda": "^0.27.40",
|
"@types/ramda": "^0.27.40",
|
||||||
@ -2367,6 +2369,16 @@
|
|||||||
"graphql": "*"
|
"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": {
|
"node_modules/@types/http-proxy-agent": {
|
||||||
"version": "2.0.2",
|
"version": "2.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/@types/http-proxy-agent/-/http-proxy-agent-2.0.2.tgz",
|
"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==",
|
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==",
|
||||||
"dev": true
|
"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": {
|
"node_modules/hmac-drbg": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
|
||||||
@ -11446,6 +11466,15 @@
|
|||||||
"graphql": "*"
|
"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": {
|
"@types/http-proxy-agent": {
|
||||||
"version": "2.0.2",
|
"version": "2.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/@types/http-proxy-agent/-/http-proxy-agent-2.0.2.tgz",
|
"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": {
|
"hmac-drbg": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
|
||||||
|
|||||||
@ -13,6 +13,7 @@
|
|||||||
"@apollo/client": "^3.3.16",
|
"@apollo/client": "^3.3.16",
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"graphql": "^15.5.0",
|
"graphql": "^15.5.0",
|
||||||
|
"highlight.js": "^11.0.1",
|
||||||
"next": "10.2.0",
|
"next": "10.2.0",
|
||||||
"postcss-import": "^14.0.1",
|
"postcss-import": "^14.0.1",
|
||||||
"postcss-nested": "^5.0.5",
|
"postcss-nested": "^5.0.5",
|
||||||
@ -29,6 +30,7 @@
|
|||||||
"@types/autoprefixer": "^10.2.0",
|
"@types/autoprefixer": "^10.2.0",
|
||||||
"@types/classnames": "^2.3.1",
|
"@types/classnames": "^2.3.1",
|
||||||
"@types/graphql": "^14.5.0",
|
"@types/graphql": "^14.5.0",
|
||||||
|
"@types/highlight.js": "^10.1.0",
|
||||||
"@types/postcss-import": "^12.0.0",
|
"@types/postcss-import": "^12.0.0",
|
||||||
"@types/postcss-nested": "^4.2.3",
|
"@types/postcss-nested": "^4.2.3",
|
||||||
"@types/ramda": "^0.27.40",
|
"@types/ramda": "^0.27.40",
|
||||||
|
|||||||
@ -6,8 +6,7 @@ import styles from "./_app.module.css";
|
|||||||
import { ApolloProvider } from "@apollo/client";
|
import { ApolloProvider } from "@apollo/client";
|
||||||
import { useApollo } from "../commons/graphql/client";
|
import { useApollo } from "../commons/graphql/client";
|
||||||
import { ThemeProvider, useTheme } from '../commons/theme';
|
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 }) {
|
function MyApp({ Component, pageProps }) {
|
||||||
const apolloClient = useApollo(pageProps);
|
const apolloClient = useApollo(pageProps);
|
||||||
|
|||||||
@ -1,2 +0,0 @@
|
|||||||
.article {
|
|
||||||
}
|
|
||||||
@ -75,28 +75,286 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
@apply text-red-400 underline;
|
||||||
|
|
||||||
|
:global(.dark) & {
|
||||||
|
@apply text-green-500;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
@apply filter saturate-200;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
code,
|
code,
|
||||||
pre {
|
pre {
|
||||||
@apply font-mono rounded;
|
@apply font-mono rounded;
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code:not(:global(.hljs)) {
|
||||||
@apply p-1 text-red-500 bg-red-100;
|
@apply p-1 text-red-500 bg-red-100;
|
||||||
:global(.dark) & {
|
:global(.dark) & {
|
||||||
@apply bg-green-800 bg-opacity-20 text-green-400;
|
@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;
|
||||||
|
padding: 1em;
|
||||||
}
|
}
|
||||||
code {
|
|
||||||
@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. <?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) & {
|
:global(.dark) & {
|
||||||
@apply text-current bg-transparent;
|
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 {
|
.articleEnd {
|
||||||
@apply text-center text-gray-400 text-sm my-6;
|
@apply text-center text-gray-400 text-sm my-6;
|
||||||
|
|
||||||
&:before, &:after {
|
&:before,
|
||||||
content: '※';
|
&:after {
|
||||||
|
content: "※";
|
||||||
@apply mx-4 text-xs align-text-top;
|
@apply mx-4 text-xs align-text-top;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
* {
|
||||||
|
@apply transition-colors;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user