Syntax highlighting on the website paegs (#1780)

1d7c74e9 · 满远荣 · Ryan Dahl · 061a9353 · 1d7c74e9 · 1d7c74e9
5 changed file
--- a/website/index.html
+++ b/website/index.html
@@ -3,6 +3,10 @@
 <html>
  <head>
    <title>Deno</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/default.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/github-gist.min.css">
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/highlight.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/languages/typescript.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  </head>
@@ -98,9 +102,7 @@ href="https://github.com/denoland/deno_install/blob/master/install.ps1">https://

      <p>Or a more complex one:</p>

-      <pre>
-import { serve } from "<a
-href="https://github.com/denoland/deno_std/blob/master/http/server.ts">https://deno.land/x/http/server.ts</a>";
+      <pre><code class="typescript language-typescript">import { serve } from "https://deno.land/x/http/server.ts";
 const s = serve("0.0.0.0:8000");

 async function main() {
@@ -109,7 +111,7 @@ async function main() {
  }
 }

-main(); </pre>
+main();</code></pre>

      <h2 id="dig-in">Dig in... <a href="#dig-in">#</a></h2>

@@ -138,6 +140,16 @@ main(); </pre>
          >A curated list of awesome Deno things</a
        >
      </p>
+
+      <script>
+        // Disable automatic language detection 
+        hljs.configure({
+          languages: [],
+        });
+
+        hljs.initHighlighting();
+      </script>
+
    </main>
  </body>
 </html>
--- a/website/manual.html
+++ b/website/manual.html
@@ -3,6 +3,10 @@
 <html>
  <head>
    <title>Deno Manual</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/default.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/github-gist.min.css">
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/highlight.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/languages/typescript.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  </head>
@@ -32,6 +36,13 @@
            let el = document.getElementById(window.location.hash.slice(1));
            window.scrollTo({ top: el.offsetTop });
          }
+
+          // Disable automatic language detection 
+          hljs.configure({
+            languages: [],
+          });
+
+          hljs.initHighlighting();
        }

        main();

--- a/website/manual.md
+++ b/website/manual.md
@@ -115,7 +115,7 @@ deno https://deno.land/welcome.js

 ### Build from source

-```
+```bash
 # Fetch deps.
 git clone --recurse-submodules https://github.com/denoland/deno.git
 cd deno
@@ -170,7 +170,7 @@ Extra steps for Windows users:

 #### Other useful commands

-```
+```bash
 # Call ninja manually.
 ./third_party/depot_tools/ninja -C target/debug

@@ -556,7 +556,7 @@ Rust. These common data structures are defined in

 ### Updating prebuilt binaries

-```
+```bash
 ./third_party/depot_tools/upload_to_google_storage.py -b denoland  \
  -e ~/.config/gcloud/legacy_credentials/ry@tinyclouds.org/.boto `which sccache`
 mv `which sccache`.sha1 prebuilt/linux64/

--- a/website/style.css
+++ b/website/style.css
@@ -91,3 +91,12 @@ header h1 {
  }
 }

+code {
+  background: rgba(36, 126, 233, 0.1);
+  padding: 2px 5px;
+  color: #333;
+}
+
+.hljs {
+  background: transparent;
+}
\ No newline at end of file
--- a/website/style_guide.html
+++ b/website/style_guide.html
@@ -3,6 +3,10 @@
 <html>
  <head>
    <title>Deno Style Guide</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/default.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/styles/github-gist.min.css">
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/highlight.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.14.2/build/languages/typescript.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  </head>
@@ -32,6 +36,13 @@
            let el = document.getElementById(window.location.hash.slice(1));
            window.scrollTo({ top: el.offsetTop });
          }
+
+          // Disable automatic language detection 
+          hljs.configure({
+            languages: [],
+          });
+
+          hljs.initHighlighting();
        }

        main();