0.2.0 • Published 3 years ago
svelte-preprocess-readme v0.2.0
svelte-preprocess-readme
Develop and demo Svelte components from your
README.md
svelte-preprocess-readme is a Svelte preprocessor that turns your README.md file into live documentation.
Installation
Yarn
yarn add -D svelte-preprocess-readmeNPM
npm i -D svelte-preprocess-readmepnpm
pnpm i -D svelte-preprocess-readmeUsage
This preprocessor is designed to be used with Vite.
package.json
{
"name": "svelte-focus-key",
"svelte": "./src/index.js",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "next",
"svelte": "^3.44.0",
"vite": "^2.6.10"
},
"repository": {
"type": "git",
"url": "https://github.com/metonym/svelte-focus-key"
}
}vite.config.js
// vite.config.js
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { preprocessReadme } from "svelte-preprocess-readme";
import pkg from "./package.json";
export default {
plugins: [
svelte({
extensions: [".svelte", ".md"],
preprocess: [
preprocessReadme({
name: pkg.name,
svelte: pkg.svelte,
relativeUrlPrefix: pkg.repository.url,
}),
],
}),
],
};index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<script type="module">
import App from "./README.md";
new App({ target: document.body });
</script>
</body>
</html>