Svelte component to render markdown.

Related tags

Learning resource svelte-exmarkdown
Overview

svelte-exmarkdown

Svelte component to render markdown.

Motivation

svelte-markdown is a good component package. However, it is not extensible. You cannot use custom syntax(e.g. KaTeX).

MDsveX is another good package. However, it is a preprocessor. Not suitable for dynamic rendering.

We need pluggable and dynamic markdown renderer in svelte like react-markdown.

Usage

You must use [email protected] or higher version. This library uses <svelte:element />.

<script>
	import Markdown from 'svelte-exmarkdown';
	let md = '# Hello world!';
</script>

<textarea bind:value={md} />
<Markdown {md} />

with GFM

<script>
	import Markdown from 'svelte-exmarkdown';
	import { gfmPlugin } from 'svelte-exmarkdown/gfm';
	let md = '# Hello world!';
</script>

<textarea bind:value={md} />
<Markdown {md} plugins={[gfmPlugin]} />

Playground & Documents

https://ssssota.github.io/svelte-exmarkdown

You might also like...

Portfolio page using React.js to render dynamic HTML

Meta-Portfolio Portfolio page using React.js to render dynamic HTML Version 1.0 Note You are important. Installation Instructions No installation nece

May 17, 2022

Websheetjs - Lightweight JS library to render website sections with data from Google Spreadsheets

websheet.js Render website sections with lazy-loaded data from Google Spreadsheets It's lightweight, fast, free and open-source ! See how it works, fu

Oct 4, 2022

Render readable & responsive tables in the terminal

terminal-columns Readable tables for the terminal. Tables can be automatically responsive! Features Content wrapped to fit column width Column widths

Oct 28, 2022

Dokka plugin to render Mermaid graphics, from your code comments to your Dokka documentation.

Dokka plugin to render Mermaid graphics, from your code comments to your Dokka documentation.

Html Mermaid Dokka plugin Mermaid-Dokka MermaidJS 0.2.2 8.14.0 0.3.0 9.0.0 Step 1: install dependencies { dokkaPlugin("com.glureau:html-mermaid-dokk

Sep 16, 2022

Given a list of items, only render what's visible on the screen while allowing scrolling the whole list.

Solid Windowed Given a list of items, only render what's visible on the screen while allowing scrolling the whole list. A Solid component. See https:/

Dec 21, 2022

Engine render, fps and I/O on terminal.

typesgine-ascii - Game ASCII engine for terminal About | technologies | Features | Examples | Functions | License 📓 About Typesgine is engine for cre

Jun 10, 2022

Detect browser, and render view according to the detected browser type.

react-browser-detector Detect browser, and render view according to the detected browser type. Installation To install, you can use npm or yarn: npm i

Jul 13, 2022

Another table select prompt plugin of inquirer.js, with powerful table render and filters.

inquirer-table-select-prompt Table row selection prompt for Inquirer.js 动机 现有的 inquirer.js 没有支持表格行选中的命令行交互的插件. 社区内能查找到的，只有一个二维数组的 checkbox，eduardobouc

Jan 7, 2023

Render e-books in the browser

foliate-js Library for rendering e-books in the browser. Features: Supports EPUB, MOBI, KF8, FB2, CBZ Pure JavaScript Small and modular No dependencie

Dec 26, 2022
Comments
  • ERR_REQUIRE_ESM error on netlify

    ERR_REQUIRE_ESM error on netlify

    現時点で最新のsveltekitのバージョンで本サンプルを作成してnetlifyにデプロイすると下記エラーになってしまいます。

    500 require() of ES Module /var/task/node_modules/remark-parse/index.js from /var/task/.netlify/server/entries/pages/index.svelte.js not supported. Instead change the require of index.js in /var/task/.netlify/server/entries/pages/index.svelte.js to a dynamic import() which is available in all CommonJS modules. Error [ERR_REQUIRE_ESM]: require() of ES Module /var/task/node_modules/remark-parse/index.js from /var/task/.netlify/server/entries/pages/index.svelte.js not supported. Instead change the require of index.js in /var/task/.netlify/server/entries/pages/index.svelte.js to a dynamic import() which is available in all CommonJS modules.

    opened by useiichi 6
  • help: Pass options to plugin

    help: Pass options to plugin

    How do you pass options to plugins ?

    I tried to add remark-behead. But I need to give it some options like {depth:2}. How is it acheived ?

    import behead from 'remark-behead';
const beheadPlugin = { remarkPlugin: behead };

<Markdown plugins={[beheadPlugin]} md={...} />
    opened by r1m 3
  • 404 document

    404 document

    https://ssssota.github.io/svelte-exmarkdown

    Deleted by db30c53 commit. ref. https://github.com/ssssota/svelte-exmarkdown/commit/a246c3ad63da1ccc04def36229f346847cbb4104#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051

    opened by ssssota 1
Releases(v1.1.6)
Owner
Sotaro Tommykawa
Sotaro Tommykawa
GitHub https://ssssota.github.io/svelte-exmarkdown
Render (GitHub Flavoured with syntax highlighting) Markdown, and generate CSS for each of GitHub’s themes.

render-gfm Render (GitHub Flavoured with syntax highlighting) Markdown, and generate CSS for each of GitHub’s themes. GitHub Repository npm Package Do

Shaun Bharat 12 Oct 10, 2022
Render arbitrary Markdown content in Astro, optionally integrating with any existing configuration.

Astro Markdown Astro Markdown lets you render arbitrary Markdown content in Astro, optionally integrating with any existing configuration. --- import

Astro Community 14 Dec 22, 2022
A Svelte parser that compiles to Mitosis JSON, allowing you to write Svelte components once and compile to every framework.

Sveltosis Still in development A Svelte parser that compiles to Mitosis JSON, allowing you to write Svelte components once and compile to every framew

sveltosis 70 Nov 24, 2022
Simple and Extensible Markdown Parser for Svelte, however its simplicity can be extended to any framework.

svelte-simple-markdown This is a fork of Simple-Markdown, modified to target Svelte, however due to separating the parsing and outputting steps, it ca

Dave Caruso 3 May 22, 2022
A markdown-it plugin that process images through the eleventy-img plugin. Can be used in any projects that uses markdown-it.

markdown-it-eleventy-img A markdown-it plugin that process images through the eleventy-img plugin. Can be used in any projects that use markdown-it. F

null 25 Dec 20, 2022
An obsidian plugin for uploading local images embedded in markdown to remote store and export markdown for publishing to static site.

Obsidian Publish This plugin cloud upload all local images embedded in markdown to specified remote image store (support imgur only, currently) and ex

Addo.Zhang 7 Dec 13, 2022
Markdown Transformer. Transform markdown files to different formats

Mdtx Inspired by generative programming and weed :). So I was learning Elm language at home usually in the evening and now I am missing all this gener

Aexol 13 Jan 2, 2023
A ✨light✨ and magical Svelte component for CSS media queries🐹

Svelte CSS media queries ?? Demo - Svelte REPL Lightweight, comfortable, like Svelte ?? how to install npm i svelte-media-queries What can I do? quer

Nikita Fedorov 9 Dec 26, 2022
👇 Bread n butter utility for component-tied mouse/touch gestures in Svelte.

svelte-gesture svelte-gesture is a library that lets you bind richer mouse and touch events to any component or view. With the data you receive, it be

Robert Soriano 29 Dec 21, 2022
Svelte component to display time distances in a human readable format.

Time Distance Display time distances in a human readable format. Based on date-fns Updates every 60 seconds View demo Usage Install package: pnpm i -D

Joshua Nussbaum 8 Nov 2, 2022