https://github.com/captaincodeman/svelte-markdown-input

Simple markdown input for Svelte
https://github.com/captaincodeman/svelte-markdown-input

edit form html input markdown svelte

Last synced: 9 months ago
JSON representation

Simple markdown input for Svelte

• Host: GitHub
• URL: https://github.com/captaincodeman/svelte-markdown-input
• Owner: CaptainCodeman
• Created: 2023-12-05T16:09:56.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2024-08-28T21:34:23.000Z (over 1 year ago)
• Last Synced: 2024-12-19T13:03:11.401Z (about 1 year ago)
• Topics: edit, form, html, input, markdown, svelte
• Language: TypeScript
• Homepage: https://captaincodeman.github.io/svelte-markdown-input/
• Size: 86.9 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# svelte-markdown-input

A simple markdown input action and store for Svelte. Designed for simple inputs of HTML snippets.

By itself, the package is 473 bytes minified, 304 bytes minified and gzipped. The micromark package will add about 14Kb to your page, and including GFM will make it aroubnd 22Kb.

## Usage

### Installation

Install using your package manager of choice, e.g.

    pnpm i -D svelte-markdown-input

### Basic Usage

Import the `createMarkdown` factory function to create an instance of the combined action / store. Apply it to a `textarea` via `use:markdown` and output the rendered HTML using `{@html $markdown}`:

```svelte

  import { createMarkdown } from 'svelte-markdown-input'

  const markdown = createMarkdown()

{@html $markdown}

```


### Options

Pass an options object to the `createMarkdown` factory function to set additional options. These currently support:

debounce - time in ms to debounce input / rendering (default 60)

micromark_options - allows setting micromark options (default undefined)

The `micromark_options` give you the ability to control the Markdown-to-HTML rendering. You could, for instance, decide to enable Github Flavored Markdown, and wrap things up into an easy-to-use input component (this is what the demo uses):

```html

  import { createMarkdown } from 'svelte-markdown-input'

  import { gfm, gfmHtml } from 'micromark-extension-gfm'

  import 'github-markdown-css/github-markdown-light.css'

  export let hidden = 'lg:hidden'

  export let shown = 'lg:block'

  export let value = ''

  export let allow_gfm = false

  const markdown = createMarkdown({

    debounce: 60,

    micromark_options: allow_gfm

      ? {

        allowDangerousHtml: true,

        extensions: [gfm()],

        htmlExtensions: [gfmHtml()],

      }

      : undefined,

  })

  let editing = true



  


     editing = true}>Write

     editing = false}>Preview

  


  


    

    
{@html $markdown}

  



```