Have ideas to improve npm?Join in the discussion! »

    @ctx-core/markdown
    TypeScript icon, indicating that this package has built-in type declarations

    10.1.0 • Public • Published

    @ctx-core/markdown

    Install

    npm i @ctx-core/markdown

    Svelte Markdown markup preprocessor

    // rollup.config.js
    import svelte from 'rollup-plugin-svelte'
    import { _preprocess } from '@ctx-core/svelte/preprocess'
    import { _markdown_preprocess } from '@ctx-core/markdown/svelte'
    const preprocess__markdown = _markdown_preprocess()
    const preprocess = _preprocess([
    	preprocess__markdown,
    	// ...
    ])
    module.exports = {
    	client: {
    		// ...
    		plugins: [
    			// ...
    			svelte({
    				// ...
    				extensions: ['.svelte', '.html', '.md'],
    				preprocess,
    			})
    		]
    	},
    	server: {
    		// ...
    		plugins: [
    			// ...
    			svelte({
    				// ...
    				extensions: ['.svelte', '.html', '.md'],
    				preprocess,
    			})
    		]
    	},
    	// ...
    }

    Now you can import *.md files as svelte components.

    ```js exec
    	let name = 'world';
    
    ```
    
    # Hello {name}!

    The preprocesser converts then converts the markdown to a svelte component.

    Frontmatter & __frontmatter store

    The component sets the __frontmatter store object with the markdown front matter.

    ---
    title: My Blog Post
    author: Me!
    date: 12-31-1999
    ---
    ```js exec
    	let name = 'world';
    ```
    
    # {$__frontmatter.title}
    
    *By {$__frontmatter.author} — {$__frontmatter.date}*
    
    Hello {name}

    Sapper _layout.svelte

    You can also utilize $__frontmatter in your _layout.svelte file. Note that order of operations means the initial value of $__frontmatter will be undefined.

    <script>
    	$: title = ($__frontmatter && $__frontmatter.title) || '' 
    	$: author = ($__frontmatter && $__frontmatter.author) || '' 
    	$: date = ($__frontmatter && $__frontmatter.date) || '' 
    </script>
    <h1>{title}</h1>
    
    <p><em>By {author}</em> — {date}</p>
    
    <slot></slot>

    Install

    npm i @ctx-core/markdown

    DownloadsWeekly Downloads

    734

    Version

    10.1.0

    License

    Apache-2.0

    Unpacked Size

    92.1 kB

    Total Files

    46

    Last publish

    Collaborators

    • avatar