Halaman utama Jelajahi Bantuan
Daftar Masuk
jerryliao
/
postdown
1
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

Inject custom Markdown styles to shadow root

jerryliao 1 tahun lalu
induk
f9aed69e18
melakukan
1139a50961
3 mengubah file dengan 16 tambahan dan 2 penghapusan
Tampilan Split Tampilkan Statistik Diff
  1. 11 0
      islands/Editor.tsx
  2. 2 2
      routes/_app.tsx
  3. 3 0
      static/markdown.css

+ 11 - 0
islands/Editor.tsx
Tampilan Berkas 

@@ -1,6 +1,7 @@
 
 import { render } from "preact";
 
 import { useEffect, useRef, useState } from "preact/hooks";
 
 import showdown, { Converter } from "showdown";
 
+import { asset } from "$fresh/runtime.ts";
 
 import { debounce, DebouncedFunction } from "$async/debounce.ts";
 
 import { hideLoading } from "utils/ui.ts";
 
 
@@ -110,6 +111,8 @@ export default function Editor(props: EditorProps) {
 
         shadowRoot = document.createElement("div");
 
         shadowRoot.id = "shadow-root";
 
         shadow?.appendChild(shadowRoot);
 
+
 
+        renderStyleToShadow();
 
       }
 
       render(
 
         <div dangerouslySetInnerHTML={{ __html: convertedContent }} />,
 
@@ -118,6 +121,14 @@ export default function Editor(props: EditorProps) {
 
     }
 
   };
 
 
+  // Render markdown style to shadow root
 
+  const renderStyleToShadow = async () => {
 
+    const shadowStyle = document.createElement("style");
 
+    const resp = await fetch(asset("/markdown.css"));
 
+    shadowStyle.innerText = await resp.text();
 
+    shadow?.appendChild(shadowStyle);
 
+  };
 
+
 
   // Event listener
 
   const modeChangeListener = (e: CustomEvent) => {
 
     if (

+ 2 - 2
routes/_app.tsx
Tampilan Berkas 

@@ -1,8 +1,8 @@
 
 import { asset, Head } from "$fresh/runtime.ts";
 
-import { AppProps } from "$fresh/server.ts";
 
+import { PageProps } from "$fresh/server.ts";
 
 import Modal from "../islands/Modal.tsx";
 
 
-export default function App({ Component }: AppProps) {
 
+export default function App({ Component }: PageProps) {
 
   return (
 
     <>
 
       <Head>

+ 3 - 0
static/markdown.css
Tampilan Berkas 

@@ -0,0 +1,3 @@
 
+pre {background-color: #f5f5f5;padding: 0.5rem 0.25rem;border-radius: 0.25rem;}
 
+table {border-collapse: collapse;}
 
+table th, table td {border: 1px solid #d6d6d6; padding: 0.25rem 0.5rem;}