rsms / markdown-wasm Goto Github PK

repro:
Input markdown:

                     |

Expected output:

<pre><code>                 |⮐</code></pre>

3c 70 72 65 3e 3c 63 6f 64 65 3e 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 7c 0a
3c 2f 63 6f 64 65 3e 3c 2f 70 72 65 3e 0a

Actual output:

3c 70 72 65 3e 3c 63 6f 64 65 3e 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 00 7c 0a
                                                                                 ~~
                                                                                 NUL
3c 2f 63 6f 64 65 3e 3c 2f 70 72 65 3e 0a

bug1.js.zip

Marked supports providing a custom highlight function to colour the code. It would be nice if markdown-wasm provides a similar feature. This means that every time a <code> or a <pre><code> is seen, it should pass the code to the hook for external rendering.

Here is how marked allows it:
https://github.com/atom-community/atom-ide-markdown-service/blob/9a95f3815bbcf2507a31235a9d2f9102192f92b2/src/renderer.ts#L33-L42

Any plan to add Deno support for markdown-wasm, and Deno developer can use this module to render Markdown quickly.

Now I have following Deno typescript code, such as demo.ts

import * as markdown from "https://raw.githubusercontent.com/rsms/markdown-wasm/master/dist/markdown.es.js";
await markdown.ready
console.log(markdown.parse("# hello\n*world*"))

I got the error with deno run demo.ts

Download https://raw.githubusercontent.com/rsms/markdown-wasm/master/dist/markdown.es.js
Check file:///Users/xxxx/demo.ts
error: Uncaught ReferenceError: document is not defined
    at https://raw.githubusercontent.com/rsms/markdown-wasm/master/dist/markdown.es.js:1:1908

Is it possible to produce a js file for Deno? such as markdown.deno.js, and the code alike following:

import {parse} from "https://denopkg.com/rsms/markdown-wasm/dist/markdown.deno.js";
console.log(parse("# hello\n*world*"))

Hi all,
I looking for a efficient parser and Markdown-wasm get may attention because is super fast and really real time parser. So, on may problem I need that, but is very import visit all nodes of markdown ast. Like the title, can I visit the ast using one interface provided by Markdown-wasm. If its possible, you have some docs?

Thank in advance.

Nice project! I'm curious to know the differences. Thanks!

Hi,

First off, thanks a lot for this module!

I'm trying to use this in Svelte-kit. I got it working in development mode locally after spending a few hours trying to understand and modify markdown.es.js. But while building for deployment I get this error -

[vite:worker] UMD and IIFE output formats are not supported for code-splitting builds.

Do you know how I can resolve this?

First of all: this is an amazing library! I love the anchor links auto-generated in headings. Fantastic 🎉

That said, there are some unexpected results when parsing code blocks. Here’s an example from Redux’s README:

  /**
-  * This is a reducer, a pure function with (state, action) => state signature.
+  * This is a reducer, a pure function with (state, action) => state signature.

 …

- store.subscribe(() => console.log(store.getState()))
+ store.subscribe(() => console.log(store.getState()))

This results in (caused mostly by the syntax highlighting library):

Expected behavior would be to not HTML escape anything within those code blocks.

I don’t know of a README with an actual lesser-than comparison (e.g. x < y -> x < y), but I’d suspect a similar behavior with that, too.

If desired, I could make an attempt at a PR (but be warned—I’m a C n00b).

The playground uses fixed flags (DEFAULT | NO_HTML), which is a good default to prevent XSS.

I might be helpful to try out the different flags though, to see how the they behave. So a list of checkboxes or a <select multiple> (or something more fancy) to choose the flags used for rendering could be a nice improvement.

when my markdown tag h1 have id = "какой то id" all characters are cut and the id = "".

How to add Cyrillic support?

Hi.
I have included this library.
And my output is this format.

<h1><a id="" class="anchor" aria-hidden="true" href="#"></a>test 1</h1>
<h2><a id="" class="anchor" aria-hidden="true" href="#"></a>test 2</h2>

How add my id or class in markdown ?
And is it possible not to create tags a. How about adding an id for the h tag?
And how can i convert html to markdown ?

I'm trying to use it in a Vue component, but when viewed from the browser URL, it tries to read markdown.wasm on the same path, so an error occurs depending on the URL.
I want to fix the location of this markdown.wasm to a location like /asset/markdowwn.wasm. How should I set it?

Hi! Thanks for this library. It's really super fast!

I've some issues when I send the html output to a wysiwyg editor caused by the anchor link added in each title.
Let's say there is a title:
# h1
The output is:
<h1><a id="h1" class="anchor" aria-hidden="true" href="#h1"></a>h1</h1>

It's a good idea to add an anchor, but that doesn't play well with some wysiwyg editor like prosemiror.
Currently, I manually remove this anchor, but it would be nice to have an option to disable this feature.

Given the following markdown (this one found in testing-library/react-testing-library):

[![Build Status][build-badge]][build]

[build-badge]: https://img.shields.io/travis/testing-library/react-testing-library.svg?style=flat-square
[build]: https://travis-ci.org/testing-library/react-testing-library

This is expected:

<a href="https://travis-ci.org/testing-library/react-testing-library"><img src="https://img.shields.io/travis/testing-library/react-testing-library.svg?style=flat-square" alt="Build Status" /></a>

But instead the following markup is generated (link is after <img> tag, and extra square brackets are left):

[<img src="https://img.shields.io/travis/testing-library/react-testing-library.svg?style=flat-square" alt="Build Status">]<a href="https://travis-ci.org/testing-library/react-testing-library">build</a>

While I can’t say I’ve ever used the pattern much, it seems that quite a number of packages on npm use this paradigm.

Would love to help on this issue if desired. Thanks!

How does this compare performance-wise to md4c? Also is there any significant reason why to use this over md4c?

Has anyone looked into how to integrate this with a Blazor app? Are there any examples available?

Thanks!

Hello, MD4C author here.

Just noticed in the demo that reference links are not handled properly with the respect to non-ASCII case-insensitive label matching, so for example:

[á]: /url
[Á]

is rendered as a literal

<p>[Á]</p>

instead as a link.

You might perhaps want to use -DMD4C_USE_UTF8 to remedy that. (See https://github.com/mity/md4c#inputoutput-encoding for more info.)

I was looking at using this project for a server-side Markdown parser, but someone I was working with tried out the demo and pointed out that this markdown:

[some text](javascript:alert("xss"))

renders as an actual JavaScript link. Does markdown-wasm offer more fine-grained control to prevent this specific URL type from being parsed?

If not, we can attempt to remove them manually (using JavaScript), but it would be great if it could directly be dealt with in the Wasm parser itself.

I am trying to use this package inside Atom, which is an Electron app. I used the following code to load and instantiate the wasm module asynchronously because Electron doesn't allow compiling large wasm files on the main thread.

  if (markdown_parse === undefined) {
    // wasm should be loaded async
    // @ts-ignore
    const markdown_wasm = (await import("markdown-wasm/dist/markdown.es")) as typeof import("markdown-wasm") & {
      ready: Promise<void>
    }
    // instantiate wasm
    await markdown_wasm.ready
    markdown_parse = markdown_wasm.parse
  }

I use Rollup as my compiler.

However, when I bundle the application I get these errors:

TypeError: Cannot set property exports of undefined

None of the distributed modules can be used in Cloudflare Workers, due to the usage of Node.js specific modules like path and fs without node: prefix. Would it be possible to add the prefix for those?

Alternatively, I see that there is a way to build custom module with the WASM embedded, which may removes the need for those path and fs modules. However, would you consider include that in the NPM package so other users can just NPM install and use it?