add styling for tsx

denoland · Oct 25, 2021 · 55b9e3e · 55b9e3e
1 parent 2a7937b
commit 55b9e3e
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 34 deletions.
diff --git a/deps.ts b/deps.ts
@@ -11,3 +11,5 @@ export { default as marked } from "https://esm.sh/marked@3.0.7";
 export * as Prism from "https://esm.sh/prismjs@1.25.0";
 
 export { default as sanitizeHtml } from "https://esm.sh/sanitize-html@2.5.2";
+
+export { escape as htmlEscape } from "https://esm.sh/he@1.2.0";
diff --git a/example/content.md b/example/content.md
@@ -105,3 +105,44 @@ To contribute, please read our
 [Build status]: https://github.com/denoland/deno/actions
 [Twitter badge]: https://twitter.com/intent/follow?screen_name=deno_land
 [Twitter handle]: https://img.shields.io/twitter/follow/deno_land.svg?style=social&label=Follow
+
+```tsx
+/** @jsx h */
+import { h, IS_BROWSER, useState } from "../deps.ts";
+
+export default function Home() {
+  return (
+    <div>
+      <p>
+        Welcome to `fresh`. Try update this message in the ./pages/index.tsx
+        file, and refresh.
+      </p>
+      <Counter />
+      <p>{IS_BROWSER ? "Viewing browser render." : "Viewing JIT render."}</p>
+    </div>
+  );
+}
+
+function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <p>{count}</p>
+      <button
+        onClick={() => setCount(count - 1)}
+        disabled={!IS_BROWSER}
+      >
+        -1
+      </button>
+      <button
+        onClick={() => setCount(count + 1)}
+        disabled={!IS_BROWSER}
+      >
+        +1
+      </button>
+    </div>
+  );
+}
+
+export const config: PageConfig = { runtimeJS: true };
+```
diff --git a/example/main.ts b/example/main.ts
@@ -2,8 +2,9 @@ import { listenAndServe } from "https://deno.land/std@0.110.0/http/server.ts";
 
 import { CSS, render } from "../mod.ts";
 
-import "https://esm.sh/prismjs@1.25.0/components/prism-javascript?no-check";
+import "https://esm.sh/prismjs@1.25.0/components/prism-jsx?no-check";
 import "https://esm.sh/prismjs@1.25.0/components/prism-typescript?no-check";
+import "https://esm.sh/prismjs@1.25.0/components/prism-tsx?no-check";
 import "https://esm.sh/prismjs@1.25.0/components/prism-bash?no-check";
 import "https://esm.sh/prismjs@1.25.0/components/prism-powershell?no-check";
 

diff --git a/mod.ts b/mod.ts
@@ -1,4 +1,4 @@
-import { emojify, marked, Prism, sanitizeHtml } from "./deps.ts";
+import { emojify, htmlEscape, marked, Prism, sanitizeHtml } from "./deps.ts";
 import { CSS } from "./style.js";
 export { CSS };
 
@@ -20,7 +20,7 @@ class Renderer extends marked.Renderer {
       ? Prism.languages[language]
       : undefined;
     if (grammar === undefined) {
-      return `<pre><code>${code}</code></pre>`;
+      return `<pre><code>${htmlEscape(code)}</code></pre>`;
     }
     const html = Prism.highlight(code, grammar, language);
     return `<div class="highlight highlight-source-${language}"><pre>${html}</pre></div>`;
@@ -56,6 +56,7 @@ export function render(markdown: string, opts: RenderOptions = {}): string {
   if (opts.allowIframes) {
     allowedTags.push("iframe");
   }
+  return html;
   return sanitizeHtml(html, {
     allowedTags,
     allowedAttributes: {

diff --git a/style.js b/style.js
diff --git a/style/main.scss b/style/main.scss
@@ -25,37 +25,49 @@
 
 @import "@primer/css/markdown/index.scss";
 
-.highlight .token.keyword {
-  color: var(--color-prettylights-syntax-keyword);
-}
-
-.highlight .token.operator,
-.token.number,
-.token.boolean {
-  color: var(--color-prettylights-syntax-constant);
-}
-
-.highlight .token.function {
-  color: var(--color-prettylights-syntax-entity);
-}
-
-.highlight .token.string {
-  color: var(--color-prettylights-syntax-string);
-}
-
-.highlight .token.comment {
-  color: var(--color-prettylights-syntax-comment);
-}
-
-.highlight .token.class-name {
-  color: var(--color-prettylights-syntax-variable);
-}
+.highlight .token {
+  &.keyword {
+    color: var(--color-prettylights-syntax-keyword);
+  }
 
-.highlight .token.regex {
-  color: var(--color-prettylights-syntax-string);
-}
+  &.operator,
+  &.number,
+  &.boolean,
+  &.tag .token.punctuation,
+  &.tag .token.attr-name {
+    color: var(--color-prettylights-syntax-constant);
+  }
 
-.highlight .token.regex .regex-delimiter {
-  color: var(--color-prettylights-syntax-constant);
+  &.function {
+    color: var(--color-prettylights-syntax-entity);
+  }
+
+  &.string {
+    color: var(--color-prettylights-syntax-string);
+  }
+
+  &.comment {
+    color: var(--color-prettylights-syntax-comment);
+  }
+
+  &.class-name {
+    color: var(--color-prettylights-syntax-variable);
+  }
+
+  &.regex {
+    color: var(--color-prettylights-syntax-string);
+  }
+
+  &.regex .regex-delimiter {
+    color: var(--color-prettylights-syntax-constant);
+  }
+
+  &.tag .token.tag {
+    color: var(--color-prettylights-syntax-entity-tag);
+  }
+
+  &.tag .token.class-name {
+    color: var(--color-prettylights-syntax-storage-modifier-import);
+  }
 }