From ae30f0c12f1177f5a63e2890097e957001e7c88e Mon Sep 17 00:00:00 2001 From: zhengqi zhang <770166635@qq.com> Date: Mon, 22 Jul 2024 14:52:24 +0800 Subject: [PATCH 1/2] Syntax Highlighting --- astro.config.ts | 17 +++ package.json | 1 + src/components/HeadCommon.astro | 1 - src/components/LeftSidebar/LeftSidebar.astro | 2 + src/content/docs/en/article-components.mdx | 52 +++++++ src/scripts/copy-to-clipboard.ts | 35 ----- src/scripts/has-focused-lines.ts | 11 ++ src/scripts/index.ts | 2 +- src/styles/copy-to-clipboard.css | 22 --- src/styles/prism-darcula.css | 141 +++++-------------- 10 files changed, 116 insertions(+), 168 deletions(-) delete mode 100644 src/scripts/copy-to-clipboard.ts create mode 100644 src/scripts/has-focused-lines.ts delete mode 100644 src/styles/copy-to-clipboard.css diff --git a/astro.config.ts b/astro.config.ts index dea16d477..ed19a08cf 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -18,6 +18,8 @@ import sitemap from "@astrojs/sitemap" import tailwind from "@astrojs/tailwind" +import expressiveCode from "astro-expressive-code" + // https://astro.build/config export default defineConfig({ site: "https://docs.scroll.io", @@ -38,6 +40,21 @@ export default defineConfig({ }), astroCallouts(), solidityRemixCode(), + expressiveCode({ + themes: ["slack-dark"], + defaultProps: { + frame: "code", + }, + styleOverrides: { + borderRadius: "27px", + borderColor: "transparent", + frames: { + shadowColor: "transparent", + editorTabBorderRadius: "0.5rem", + editorBackground: "#2b2b2b", + }, + }, + }), mdx(), tailwind({ applyBaseStyles: false, diff --git a/package.json b/package.json index 83224f985..05780f0e4 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "@astrojs/tailwind": "^5.1.0", "@nanostores/preact": "^0.3.1", "astro-auto-import": "^0.4.2", + "astro-expressive-code": "^0.35.3", "astro-i18next": "^1.0.0-beta.21", "clipboard": "^2.0.11", "ethereum-rpc-table": "^0.0.1", diff --git a/src/components/HeadCommon.astro b/src/components/HeadCommon.astro index 29073a65b..422ede014 100644 --- a/src/components/HeadCommon.astro +++ b/src/components/HeadCommon.astro @@ -3,7 +3,6 @@ import "../styles/theme.css" import "../styles/index.css" import "../styles/migrated.css" import "../styles/prism-darcula.css" -import "../styles/copy-to-clipboard.css" import "../styles/design-system/global-styles.css" --- diff --git a/src/components/LeftSidebar/LeftSidebar.astro b/src/components/LeftSidebar/LeftSidebar.astro index b9a8c7c97..29ff58f5f 100644 --- a/src/components/LeftSidebar/LeftSidebar.astro +++ b/src/components/LeftSidebar/LeftSidebar.astro @@ -246,6 +246,8 @@ const processedSidebarSections = sidebarSections.map((section) => { .nav-link.open + ul { display: block; + border-left-width: 1px; + border-left-style: solid; } .nested { diff --git a/src/content/docs/en/article-components.mdx b/src/content/docs/en/article-components.mdx index 3c5b2da5d..29c813eb5 100644 --- a/src/content/docs/en/article-components.mdx +++ b/src/content/docs/en/article-components.mdx @@ -44,6 +44,58 @@ Let's see a horizontal rule. We define the Square-Fibonacci sequence[^1], a variation of the Fibonacci sequence: +### Syntax Highlighting + +```js {13-15} +... + +const config: HardhatUserConfig = { + ... + networks: { + scrollSepolia: { + url: 'https://sepolia-rpc.scroll.io' || '', + accounts: + process.env.PRIVATE_KEY !== undefined ? [process.env.PRIVATE_KEY] : [], + }, + }, + etherscan: { + apiKey: { + scrollSepolia: , + }, + customChains: [ + { + network: 'scrollSepolia', + chainId: 534351, + urls: { + apiURL: 'https://api-sepolia.scrollscan.com/api', + browserURL: 'https://sepolia.scrollscan.com/', + }, + }, + ], + }, +} + +... +``` + +```js "return true;" ins="inserted" del="deleted" +function demo() { + console.log('These are inserted and deleted marker types'); + // The return statement uses the default marker type + return true; +} +``` + +```diff lang="js" + function thisIsJavaScript() { + // This entire block gets highlighted as JavaScript, + // and we can still add diff markers to it! +- console.log('Old code to be removed') ++ console.log('New and shiny code!') + } +``` + + ### Math - Let $f_0 = 1, f_1 = 1$ diff --git a/src/scripts/copy-to-clipboard.ts b/src/scripts/copy-to-clipboard.ts deleted file mode 100644 index 4bd2737c9..000000000 --- a/src/scripts/copy-to-clipboard.ts +++ /dev/null @@ -1,35 +0,0 @@ -import ClipboardJS from "clipboard" -// import button from "../../styles/design-system/button.module.css" -import button from "../styles/design-system/button.module.css" - -document.addEventListener("DOMContentLoaded", () => { - document.addEventListener("astro:page-load", () => { - const clipboard = new ClipboardJS(".copy-iconbutton") - - clipboard.on("success", function (e) { - const oldLabel = e.trigger.innerHTML - e.trigger.innerHTML = `` - window.setTimeout(function () { - e.trigger.innerHTML = oldLabel - }, 2000) - e.clearSelection() - }) - document.querySelectorAll("pre").forEach(function (codeBlock) { - const container = document.createElement("div") - container.className = "copy-code-button-wrapper" - - const copyButton = document.createElement("button") - copyButton.className = button.secondary - copyButton.classList.add(...["copy-iconbutton"]) - copyButton.type = "button" - const s = codeBlock.innerText - copyButton.setAttribute("data-clipboard-text", s) - copyButton.innerHTML = `copy to clipboard` - copyButton.ariaLabel = "copy to clipoard" - - container.appendChild(copyButton) - - codeBlock.insertAdjacentElement("beforebegin", container) - }) - }) -}) diff --git a/src/scripts/has-focused-lines.ts b/src/scripts/has-focused-lines.ts new file mode 100644 index 000000000..579d33a2a --- /dev/null +++ b/src/scripts/has-focused-lines.ts @@ -0,0 +1,11 @@ +document.addEventListener("DOMContentLoaded", function () { + document.addEventListener("astro:page-load", () => { + const preElements = document.querySelectorAll(".expressive-code") + preElements.forEach((pre) => { + const hasTargetClass = pre.querySelector(".mark") + if (hasTargetClass) { + pre.classList.add("has-focused-lines") + } + }) + }) +}) diff --git a/src/scripts/index.ts b/src/scripts/index.ts index fda66e4ba..c157326d4 100644 --- a/src/scripts/index.ts +++ b/src/scripts/index.ts @@ -1,4 +1,4 @@ import "./fix-remix-urls" import "./fix-external-links" import "./click-to-zoom" -import "./copy-to-clipboard" +import "./has-focused-lines" diff --git a/src/styles/copy-to-clipboard.css b/src/styles/copy-to-clipboard.css deleted file mode 100644 index 2376fc984..000000000 --- a/src/styles/copy-to-clipboard.css +++ /dev/null @@ -1,22 +0,0 @@ -.copy-code-button-wrapper { - margin-top: -7px !important; - margin-right: 4px !important; - display: flex; - z-index: 1; - justify-content: flex-end; - position: absolute; - transform: translateY(5px); - right: 0; - @apply pt-2 pr-2 pb-0 pl-0; -} - -.copy-code-button-wrapper > button { - display: flex; - border-radius: 50%; - padding: 11px; -} - -.copy-code-button-wrapper > button > img { - width: 16px; - height: 16px; -} diff --git a/src/styles/prism-darcula.css b/src/styles/prism-darcula.css index 626e40aff..dd9353972 100644 --- a/src/styles/prism-darcula.css +++ b/src/styles/prism-darcula.css @@ -1,15 +1,5 @@ -/** - * Darcula theme - * - * Adapted from a theme based on: - * IntelliJ Darcula Theme (https://github.com/bulenkov/Darcula) - * - * @author Alexandre Paradis - * @version 1.0 - */ - -code[class*="language-"], -pre[class*="language-"] { +code[data-language], +pre[data-language] { color: #a9b7c6; font-family: var(--font-family-code); direction: ltr; @@ -30,22 +20,22 @@ pre[class*="language-"] { } code, -code[class*="language-"] *, -pre[class*="language-"] * { +code[data-language] *, +pre[data-language] * { font-family: var(--font-family-code) !important; font-size: 16px; } -pre[class*="language-"]::-moz-selection, -pre[class*="language-"] ::-moz-selection, -code[class*="language-"]::-moz-selection, -code[class*="language-"] ::-moz-selection { +pre[data-language]::-moz-selection, +pre[data-language] ::-moz-selection, +code[data-language]::-moz-selection, +code[data-language] ::-moz-selection { color: inherit; background: rgba(33, 66, 131, 0.85); } /* Code blocks */ -pre[class*="language-"] { +pre[data-language] { padding: 1em; margin: 0.5em 0; overflow: auto; @@ -53,8 +43,8 @@ pre[class*="language-"] { margin-bottom: 2.2em; } -:not(pre) > code[class*="language-"], -pre[class*="language-"] { +:not(pre) > code[data-language], +pre[data-language] { background: #2b2b2b; border-radius: 27px; padding: 17px; @@ -62,110 +52,43 @@ pre[class*="language-"] { } /* Inline code */ -:not(pre) > code[class*="language-"] { +:not(pre) > code[data-language] { padding: 0.1em; border-radius: 0.3em; } -.token.class-name { - color: #afafaf; -} - -.token.comment, -.token.prolog, -.token.cdata { - color: #808080; -} - -.token.delimiter, -.token.boolean, -.token.keyword, -.token.selector, -.token.important, -.token.atrule { - color: #cc7832; -} - -.token.operator, -.token.punctuation, -.token.attr-name { - color: #a9b7c6; -} - -.token.tag, -.token.tag .punctuation, -.token.doctype, -.token.builtin { - color: #e8bf6a; -} - -.token.entity, -.token.number, -.token.symbol { - color: #6897bb; -} - -.token.property, -.token.constant, -.token.variable { - color: #9876aa; +.frame { + overflow: hidden; } -.token.string, -.token.char { - color: #6a8759; +.expressive-code pre, +.expressive-code code { + font-size: 16px !important; } -.token.attr-value, -.token.attr-value .punctuation { - color: #a5c261; +.expressive-code.has-focused-lines .ec-line:not(.highlight) .code { + opacity: 0.7; + transition: filter 0.35s, opacity 0.35s; + filter: blur(0.095rem); } -.token.attr-value .punctuation:first-child { - color: #a9b7c6; -} - -.token.url { - color: #287bde; - text-decoration: underline; -} - -.token.function { - color: #ffc66d; -} - -.token.regex { - background: #364135; +.expressive-code.has-focused-lines:hover .ec-line .code { + opacity: 1; + filter: none; } -.token.bold { - font-weight: bold; +.expressive-code.has-focused-lines .ec-line.mark.highlight { + background: transparent; } -.token.italic { - font-style: italic; -} - -.token.inserted { - background: #294436; -} - -.token.deleted { - background: #484a4a; -} - -code.language-css .token.property, -code.language-css .token.property + .token.punctuation { - color: #a9b7c6; +.expressive-code div.copy button { + border-radius: 50%; } -code.language-css .token.id { - color: #ffc66d; +div.expressive-code pre::-webkit-scrollbar { + height: 0; } -code.language-css .token.selector > .token.class, -code.language-css .token.selector > .token.attribute, -code.language-css .token.selector > .token.pseudo-class, -code.language-css .token.selector > .token.pseudo-element { - color: #ffc66d; +.expressive-code .ec-line div.code { + border-inline-start: unset; } From ce8cfd6d5bf7dcdc239e585d5f6b5be196bdc201 Mon Sep 17 00:00:00 2001 From: zzq0826 <770166635@qq.com> Date: Mon, 22 Jul 2024 21:34:36 +0800 Subject: [PATCH 2/2] Update astro.config.ts --- astro.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/astro.config.ts b/astro.config.ts index ed19a08cf..438c0cc51 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -41,7 +41,7 @@ export default defineConfig({ astroCallouts(), solidityRemixCode(), expressiveCode({ - themes: ["slack-dark"], + themes: ["dark-plus"], defaultProps: { frame: "code", },