Merge pull request #304 from scroll-tech/syntax-highlighting

 Syntax Highlighting

Author: dghelm

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: ["dark-plus"],
+      defaultProps: {
+        frame: "code",
+      },
+      styleOverrides: {
+        borderRadius: "27px",
+        borderColor: "transparent",
+        frames: {
+          shadowColor: "transparent",
+          editorTabBorderRadius: "0.5rem",
+          editorBackground: "#2b2b2b",
+        },
+      },
+    }),
     mdx(),
     tailwind({
       applyBaseStyles: false,

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",

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"
 ---

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 {

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: <YOUR API KEY>,
+    },
+    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$

src/scripts/copy-to-clipboard.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")
+      }
+    })
+  })
+})

src/scripts/has-focused-lines.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"

src/scripts/index.ts

@@ -1,15 +1,5 @@
-/**
- * Darcula theme
- *
- * Adapted from a theme based on:
- * IntelliJ Darcula Theme (https://github.com/bulenkov/Darcula)
- *
- * @author Alexandre Paradis <service.paradis@gmail.com>
- * @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,142 +20,75 @@ 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;
   margin-top: 1.4em;
   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;
   padding-right: 70px;
 }
 
 /* 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;
 }