-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
04d7ca7
commit a0b0efd
Showing
7 changed files
with
98 additions
and
68 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| --- | ||
| 'svelte-pp-markdown': patch | ||
| 'svelte-pp-katex': patch | ||
| 'svelte-pp-shiki': patch | ||
| '@samplekit/preprocess-markdown': patch | ||
| '@samplekit/preprocess-katex': patch | ||
| '@samplekit/preprocess-shiki': patch | ||
| --- | ||
|
|
||
| update readme |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,43 @@ | ||
| # KaTeX TextMate Grammar Injection into Svelte Templates | ||
| # Syntax Highlighting for Math in Svelte Templates | ||
|
|
||
| Accompanies the @samplekit/preprocess-katex npm package to inject syntax highlighting into the Svelte template math blocks. | ||
| This extension adds syntax highlighting to – and snippets for – the [@samplekit/preprocess-katex](https://www.npmjs.com/package/@samplekit/preprocess-katex) NPM package. | ||
|
|
||
| ## Features | ||
| The NPM package allows you to write math (via KaTeX) directly in Svelte templates without disrupting other tools like svelte-check, Prettier, ESLint, TypeScript, etc. | ||
|
|
||
| - injects [text.tex.latex meta.math.block.latex support.class.math.block.environment.latex]() highlighting into HTML comments inside Svelte markup. | ||
| - injects [text.katex scope](https://github.com/yzhang-gh/vscode-markdown/blob/master/syntaxes/katex.tmLanguage.json) into tagged template literals in JS | ||
| - adds snippets to make it quicker to generate the required HTML comments. | ||
| ## Examples | ||
|
|
||
| ## Svelte HTML Comments | ||
| ### In Svelte Markup | ||
|
|
||
| By using HTML comments, it's trivial to write a preprocessor without running afoul of svelte check, prettier, eslint, typescript, etc. | ||
|
|
||
| #### `<!-- \[ \] -->` (KaTeX display mode) and `<!-- \( \) -->` (KaTeX inline mode) | ||
|
|
||
| Before | ||
| #### Without Extension | ||
|
|
||
| <img alt="KaTeX display in HTML comment without extension." src="https://raw.githubusercontent.com/timothycohen/samplekit/main/packages/preprocess-katex-vscode/static/demo-comment-katex-before.png" width="300" /> | ||
|
|
||
| After | ||
| #### With Extension | ||
|
|
||
| <img alt="KaTeX display in HTML comment with extension." src="https://raw.githubusercontent.com/timothycohen/samplekit/main/packages/preprocess-katex-vscode/static/demo-comment-katex.png" width="300" /> | ||
|
|
||
| ## JS/TS Template Literals | ||
|
|
||
| A tagged template literal is used to inject KaTeX highlighting into JS. | ||
|
|
||
| #### <code>katex\`</code> or <code>latex\`</code> (case insensitive) | ||
| ### In JS Tagged Template Literal | ||
|
|
||
| Before | ||
| #### Without Extension | ||
|
|
||
| <img alt="KaTeX in template literal without extension." src="https://raw.githubusercontent.com/timothycohen/samplekit/main/packages/preprocess-katex-vscode/static/demo-template-katex-before.png" width="300" /> | ||
|
|
||
| After | ||
| #### With Extension | ||
|
|
||
| <img alt="KaTeX in template literal with extension." src="https://raw.githubusercontent.com/timothycohen/samplekit/main/packages/preprocess-katex-vscode/static/demo-template-katex.png" width="300" /> | ||
|
|
||
| ## Extension | ||
| ## Supported Syntax | ||
|
|
||
| The supported syntax matches that of the NPM package's preprocessor. | ||
|
|
||
| In Svelte markup, use `<!-- \[ \] -->` for display mode and `<!-- \( \) -->` for inline mode. | ||
|
|
||
| For JS tagged template literals, use <code>katex\`</code> or <code>latex\`</code> (case insensitive). | ||
|
|
||
| ## Links | ||
|
|
||
| > [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=samplekit.svelte-pp-katex) | ||
| - [Docs](https://preprocessors.samplekit.dev/docs/math/) | ||
| - [Extension on the VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=samplekit.svelte-pp-katex) | ||
| - [Extension Source](https://github.com/timothycohen/samplekit/tree/main/packages/preprocess-katex-vscode) | ||
| - [Companion NPM Package](https://www.npmjs.com/package/@samplekit/preprocess-katex) | ||
| - [Companion Package Source](https://github.com/timothycohen/samplekit/tree/main/packages/preprocess-katex) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,29 @@ | ||
| # Markdown TextMate Grammar Injection into Svelte Templates | ||
| # Syntax Highlighting for Markdown in Svelte Templates | ||
|
|
||
| Accompanies the @samplekit/preprocess-katex npm package to inject syntax highlighting into the Svelte template markdown blocks. | ||
| This extension adds syntax highlighting to – and snippets for – the [@samplekit/preprocess-markdown](https://www.npmjs.com/package/@samplekit/preprocess-markdown) NPM package. | ||
|
|
||
| ## Features | ||
| The NPM package allows you to write Markdown (via Marked) directly in Svelte templates without disrupting other tools like svelte-check, Prettier, ESLint, TypeScript, etc. | ||
|
|
||
| - injects Markdown highlighting into HTML comments inside Svelte markup. | ||
| - adds snippets to make it quicker to generate the required HTML comments. | ||
| ## Examples | ||
|
|
||
| ## Svelte HTML Comments | ||
| ### Without Extension | ||
|
|
||
| By using HTML comments, it's trivial to write a preprocessor without running afoul of svelte check, prettier, eslint, typescript, etc. | ||
| <img alt="Markdown in HTML comment without extension." src="https://raw.githubusercontent.com/timothycohen/samplekit/main/packages/preprocess-markdown-vscode/static/demo-comment-md-before.png" width="300" /> | ||
|
|
||
| #### `<!-- md-start md-end -->` | ||
| ### With Extension | ||
|
|
||
| Before | ||
| <img alt="Markdown in HTML comment with extension." src="https://raw.githubusercontent.com/timothycohen/samplekit/main/packages/preprocess-markdown-vscode/static/demo-comment-md.png" width="300" /> | ||
|
|
||
| <img alt="Markdown in HTML comment without extension." src="https://raw.githubusercontent.com/timothycohen/samplekit/main/packages/preprocess-markdown-vscode/static/demo-comment-md-before.png" width="300" /> | ||
| ## Supported Syntax | ||
|
|
||
| After | ||
| The supported syntax matches that of the NPM package's preprocessor. | ||
|
|
||
| <img alt="Markdown in HTML comment with extension." src="https://raw.githubusercontent.com/timothycohen/samplekit/main/packages/preprocess-markdown-vscode/static/demo-comment-md.png" width="300" /> | ||
| In Svelte markup, wrap Markdown with `<!-- md-start md-end -->`. | ||
|
|
||
| ## Extension | ||
| ## Links | ||
|
|
||
| > [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=samplekit.svelte-pp-markdown) | ||
| - [Docs](https://preprocessors.samplekit.dev/docs/markdown/) | ||
| - [Extension on the VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=samplekit.svelte-pp-markdown) | ||
| - [Extension Source](https://github.com/timothycohen/samplekit/tree/main/packages/preprocess-markdown-vscode) | ||
| - [Companion NPM Package](https://www.npmjs.com/package/@samplekit/preprocess-markdown) | ||
| - [Companion Package Source](https://github.com/timothycohen/samplekit/tree/main/packages/preprocess-markdown) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,29 @@ | ||
| # Codeblock TextMate Grammar Injection into Svelte Templates | ||
| # Syntax Highlighting for Decorated Code Blocks in Svelte Templates | ||
|
|
||
| Accompanies the @samplekit/preprocess-shiki npm package to inject syntax highlighting into the Svelte template code blocks. | ||
| This extension adds syntax highlighting to – and snippets for – the [@samplekit/preprocess-shiki](https://www.npmjs.com/package/@samplekit/preprocess-shiki) NPM package. | ||
|
|
||
| ## Features | ||
| The NPM package allows you to write decorated code blocks (via Shiki) directly in Svelte templates without disrupting other tools like svelte-check, Prettier, ESLint, TypeScript, etc. | ||
|
|
||
| - injects code highlighting into HTML comments inside Svelte markup. | ||
| - adds snippets to make it quicker to generate the required HTML comments. | ||
| ## Examples | ||
|
|
||
| ## Svelte HTML Comments | ||
| ### Without Extension | ||
|
|
||
| By using HTML comments, it's trivial to write a preprocessor without running afoul of svelte check, prettier, eslint, typescript, etc. | ||
| <img alt="Codeblock in HTML comment without extension." src="https://raw.githubusercontent.com/timothycohen/samplekit/main/packages/preprocess-shiki-vscode/static/demo-comment-code-before.png" width="300" /> | ||
|
|
||
| #### `<!-- shiki-start shiki-end -->` | ||
| ### With Extension | ||
|
|
||
| Before | ||
| <img alt="Codeblock in HTML comment with extension." src="https://raw.githubusercontent.com/timothycohen/samplekit/main/packages/preprocess-shiki-vscode/static/demo-comment-code.png" width="300" /> | ||
|
|
||
| <img alt="Codeblock in HTML comment without extension." src="https://raw.githubusercontent.com/timothycohen/samplekit/main/packages/preprocess-shiki-vscode/static/demo-comment-code-before.png" width="300" /> | ||
| ## Supported Syntax | ||
|
|
||
| After | ||
| The supported syntax matches that of the NPM package's preprocessor. | ||
|
|
||
| <img alt="Codeblock in HTML comment with extension." src="https://raw.githubusercontent.com/timothycohen/samplekit/main/packages/preprocess-shiki-vscode/static/demo-comment-code.png" width="300" /> | ||
| In Svelte markup, wrap blocks with `<!-- shiki-start shiki-end -->` and one liners with `<!-- shiki-svelte shiki-svelte -->`, `<!-- shiki-html shiki-html -->`, etc. | ||
|
|
||
| ## Extension | ||
| ## Links | ||
|
|
||
| > [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=samplekit.svelte-pp-shiki) | ||
| - [Docs](https://preprocessors.samplekit.dev/docs/code-decoration/) | ||
| - [Extension on the VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=samplekit.svelte-pp-shiki) | ||
| - [Extension Source](https://github.com/timothycohen/samplekit/tree/main/packages/preprocess-shiki-vscode) | ||
| - [Companion NPM Package](https://www.npmjs.com/package/@samplekit/preprocess-shiki) | ||
| - [Companion Package Source](https://github.com/timothycohen/samplekit/tree/main/packages/preprocess-shiki) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters