svelte-readme 4.0.1 → 4.2.0

package/README.md

@@ -25,7 +25,7 @@ At its core, this library is a simple Svelte preprocessor.
 2. Use `README.md` as the Svelte source code
 3. Parse Markdown using [Markdown It](https://github.com/markdown-it/markdown-it)
 4. Highlight code with a built-in highlighter (`svelte`, `typescript`/`javascript`, `json`, `yaml`, `bash`) and run `svelte` code fence blocks so that demos are juxtaposed with code
-5. Style the result with [GitHub Markdown CSS](https://github.com/sindresorhus/github-markdown-css) to maintain a consistent look with [github.com](https://github.com/)
+5. Style the result with a built-in, themeable stylesheet inspired by GitHub's markdown rendering
 
 ## Installation
 
@@ -130,6 +130,36 @@ interface SvelteReadmeOptions {
 }
 ```
 
+### Custom fonts
+
+Load fonts from a CDN via `head`, then point the library's `--sr-font-sans` (body text) and `--sr-font-mono` (code snippets) custom properties (see [style.css](src/styles/style.css)) at them via `style`:
+
+```ts
+import { svelteReadme } from "svelte-readme";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [
+    svelteReadme({
+      head: `
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+          href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&display=swap"
+          rel="stylesheet"
+        />
+      `,
+      style: `
+        :root {
+          --sr-font-sans: "Public Sans", system-ui, sans-serif;
+          --sr-font-mono: "JetBrains Mono", ui-monospace, monospace;
+        }
+      `,
+    }),
+  ],
+});
+```
+
 ## Changelog
 
 [CHANGELOG.md](CHANGELOG.md)

package/dist/highlight/shared.d.ts

@@ -6,6 +6,7 @@ export type Claim = {
 export type GapFill = (text: string) => string;
 export declare function escapeHtml(text: string): string;
 export declare function token(className: string, text: string): string;
+export declare function readGrammarCss(moduleUrl: string, filename: string): string;
 export declare const baseTokenStyles: string;
 export declare function renderClaims(source: string, claims: Claim[], gapFill: GapFill): string;
 export declare function gapFill(text: string): string;