Markdown

The @samplekit/preprocess-markdown npm package and samplekit.svelte-pp-markdown VS Code extension allow you to write Markdown processed with Marked directly within your Svelte template.

Feature Overview

• Write Markdown in Svelte templates. Write tables with ease just like you would with Markdown.

  Preprocessor	VS Code Extension
  @samplekit/preprocess-katex	samplekit.svelte-pp-katex
  @samplekit/preprocess-markdown	samplekit.svelte-pp-markdown
  @samplekit/preprocess-shiki	samplekit.svelte-pp-shiki

• Separate but Coexisting Languages Whereas other packages like mdsvex freely mix Svelte and Markdown, this package isolates the preprocessing to blocks inside md-start and md-end tags. This lightweight approach preserves your control over the DOM and lets you break out into Markdown for those annoying parts of HTML (tables). There is a complementary preprocessor package which handles code block decoration by using Shiki to inject CSS variables.
• Code with TextMate support. The VS Code extension provides you with full highlighting support. It injects the TextMate grammar scope between the delimiters to work with your VS Code theme.

Installation

1. Install the preprocessor

   pnpm add -D @samplekit/preprocess-markdown

2. Add to svelte.config.js

   import { processMarkdown, createMdLogger } from '@samplekit/preprocess-markdown';
   import adapter from '@sveltejs/adapter-auto';
   import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
   
   const preprocessorRoot = `${import.meta.dirname}/src/routes/`;
   const formatFilename = (/** @type {string} */ filename) => filename.replace(preprocessorRoot, '');
   
   /** @type {import('@sveltejs/kit').Config} */
   const config = {
   	preprocess: [
   		processMarkdown({
   			include: (filename) => filename.startsWith(preprocessorRoot),
   			logger: createMdLogger(formatFilename),
   		}),
   		vitePreprocess(),
   	],
   	kit: {
   		adapter: adapter(),
   	},
   };
   
   export default config;

3. Install the VS Code extension (for snippets and syntax highlighting) samplekit.svelte-pp-markdown

Example Usage

<!-- md-start
### A markdown table.

Style however you want.
Here's what it looks like with [Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-typography).

| Heading 1 | Heading 2                |
| --------- | ------------------------ |
| cell 1    | count: {count}           |
| cell 3    | [cell 4](#example-usage) |

- [x] Markdown
- [x] Syntax Highlighting

### Reactivity

<button class="btn btn-accent" onclick={increaseCount}>Increase Count: {count}</button>
md-end -->

<!-- md-start
### A markdown table.

Style however you want.
Here's what it looks like with [Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-typography).

| Heading 1 | Heading 2                |
| --------- | ------------------------ |
| cell 1    | count: {count}           |
| cell 3    | [cell 4](#example-usage) |

- [x] Markdown
- [x] Syntax Highlighting

### Reactivity

<button class="btn btn-accent" onclick={increaseCount}>Increase Count: {count}</button>
md-end -->

<h3 id="a-markdown-table">A markdown table.</h3>
<p>
	Style however you want. Here's what it looks like with
	<a  data-external href="https://github.com/tailwindlabs/tailwindcss-typography">Tailwind Typography</a>.
</p>
<table>
	<thead>
		<tr>
			<th>Heading 1</th>
			<th>Heading 2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>cell 1</td>
			<td>count: {count}</td>
		</tr>
		<tr>
			<td>cell 3</td>
			<td>
				<a href="#example-usage">cell 4</a>
			</td>
		</tr>
	</tbody>
</table>
<ul>
	<li><input checked="" disabled="" type="checkbox" /> Markdown</li>
	<li><input checked="" disabled="" type="checkbox" /> Syntax Highlighting</li>
</ul>
<h3 id="reactivity">Reactivity</h3>
<p><button class="btn btn-accent" onclick={increaseCount}>Increase Count: {count}</button></p>

After preprocessing:

Scope

<button onclick={() => { count++ }}>