Svelte Markup
Pug & Markdown support for svelte made easy
Svelte-markup uses the existing file extension to find the appropriate renderer. That means no more <template lang="pug">.
Additionally, according to my minimal research* is the only svelte pug preprocessor on the face of the planet which supports the builtin svelte blocks (e.g. {#if x > 10}).
* I could definately be wrong, but I couldn't find anything to suite my needs in the 10 minutes I looked...
Disclaimer:... This project is made of dumb hacks.
Install
yarn add -D svelte-markup
npm install -D svelte-markup
Example Rollup Config
// rollup.config.js
//...
import markup from 'svelte-markup';
export default {
//...
plugins: [
svelte({
// add file extensions you wish to use
extensions: ['.svelte', '.pug', '.md'],
//...
// run the preprocessors
preprocess: [
//...
markup(),
//...
]
}),
Usage with sapper
Add the required extensions --ext '.md .pug .svelte' to the package.json sapper scripts
{
"dev": "sapper dev --ext '.md .pug .svelte'",
"build": "sapper build --legacy --ext '.md .pug .svelte'",
"export": "sapper export --legacy --ext '.md .pug .svelte'",
}
Options
options can be supplied to the pre-processors
preprocess: [
markup(options)
]
available options are as follows:
const options = {
pug: {
renderOptions: {
// see: the render() method options
// https://pugjs.org/api/reference.html
}
markdown: {
renderOptions: {
// https://markdown-it.github.io/markdown-it/#MarkdownIt.new
}
}
}
Example Time
App.pug
svelte:head
link(rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/dracula.min.css")
script.
import Counter from './Counter.svelte'
import MarkdownTest from './MarkdownTest.md'
let x = 73
//- note: scss not included in this package
style(lang="scss").
.count {
width: 100vw;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
&:hover {
background: red;
}
}
h1 The App
MarkdownTest
.count
Counter
p is {x} greater than 10? {#if x > 10} Yes it is! {:else} not a chance! {/if}
{#if x > 10}
p {x} is too large
{/if}
MarkdownTest.md
<script>
let name = 'World'
let x = 60
</script>
<style>
h1 {
color: green;
}
</style>
# Hello {name}
> welcome
```js
// Syntax Highlighting from highlight.js
if (5 > 9) return 9;
```
# is {x} greater than 10? {#if x > 10} Yes it is! {:else} not a chance! {/if}
Counter.svelte
<script>
var count = 5
$: double = count * 2
const increment = () => count++
const decrement = () => count--
</script>
<style>
button {
color: red;
font-weight: 700;
}
</style>
<h2>Count: {count}</h2>
<h2>Double: {double}</h2>
<button on:click={increment}>Increment</button>
<button on:click={decrement}>Decrement</button>
