STR:

• Use ]] in your string.
• Observe the markdown output.

Expected:

• ]] should come up normally.

Actual:

• ]] doesn't come up.

Demo. Compare it with remarkable

Why I care ?

A Punjabi font uses roman characters to form Punjabi alphabets. It uses ]] for what is know as full stop in Punjabi. It is broken now after I moved from remarkable to snarkdown. I love the perf and size of library, and I understand why this might not be considered to be fixed, but I thought it's worth the shot!

mSrc [, options ])

generated unexpected link:

mSrc <a href="undefined">, options </a>)

Links inside runs of bold or italic text are rendered as invalid HTML.

For example, the following Markdown:

foo **[link](https://example.com)** bar

is rendered as:

foo <strong><a href="https://example.com">link</strong></a><strong> bar</strong>

whilst the expected output would be:

foo <strong><a href="https://example.com">link</a></strong> bar

More examples here.

Two things are unexpected here:

1. The output is invalid because the <strong> and <a> tags are closed in the same order in which they're opened.
2. The <strong> tag is then re-opened and not closed until the end of the text, causing more of the text to be bold than intended.

The same happens when using __ instead of **, as well as with italics (_ or *).

When the formatting is inside the link, the result is as expected:

foo [**link**](https://example.com) bar

This renders as:

foo <a href=\"https://example.com\"><strong>link</strong></a> bar

Hey !

Cool project ! Thanks for sharing this, really.

@developit, after going through the code, I found some irregularities (PR submitted) but I don't know to which extend you will accept PR or what aspects of Markdown are you willing to support Vs the 1kb claim.
I know you are by definition a "zero-calories-coder" (yeah it's brand new term, my present :P ) #Preact (3kb) , but where do you want to go with snarkdown ?

In my opinion, I totally buy the 1kb assertion (this one aspect lead me here in the first place), however I would like to be able to freely extend functionalities. My personal goal, for my project would be o basically match with markdown-it.
This means support for GFM tables (I see a PR is pending), I recently added strikethrough, I also see there is a slight problem regarding images that do not support the Alt attribute (a PR on that might move stuff around as it implies adding a new catching group to links regex...), I think I can add subscript and superscript, and custom containers (which is out of commonMarks specs but I find it useful to add basic styling) would basically be 200 bytes to implement...
Now, in your opinion, when should we include all of this into snarkdown, and when it should be out: how to implement it ?

Indireclty, my question is two fold:

1. is there some roadmap you wish to implement ?
2. to balance lightweight code Vs features : could you guide us toward a kind of plugin implementation that would extend the 1kb if needed ?

Thanks for reading

When using as live editor it crashes/freezes active tab

• try to paste _ or * in textarea within your demo http://jsfiddle.net/developit/828w6t1x/

Havoc will follow :(

Right now reference links in headers are not parsed properly. This markdown

# This is a header [with link]

[with link]: http://example.com

will generate this html

<h1>This is a header <a href="undefined">with link</a></h1>

This happens because links object is not in context on the time of links generation. The easiest fix will be to move links declaration to the global scope of the module. The other solution could be to somehow pass links object to the nested parse call, something like that:

export default function parse(md, links = {}) {
// ...
	chunk = '<'+t+'>' + parse(token[12] || token[15], links) + '</'+t+'>';

but this will change parse function api, so I'm not sure this solution is any good

I'll be happy to submit a PR if any of this solutions are acceptable 😸

I love this library but just found that it does not add id to h* elements. This could be very useful for anchoring. I am trying to fix that, any help would be great though.

input

***hello***

actual

<em>hello<strong><em></em></strong></em>

expected
https://babelmark.github.io/?text=***hello***

<strong><em>hello</em></strong>

And one other, even weirder, case (heading being nested inside formatting from the previous line)

input

***hello***

## Heading

actual

<em>hello<strong><em><h2>Heading</h2></em></strong></em>

expected
https://babelmark.github.io/?text=***hello***%0A%0A%23%23+Heading

<strong><em>hello</em></strong>

<h2>
  Heading
</h2>

Similar to WebReflection/lightdown#1

I'd like to request a usage example that takes markdown which includes JS like this example:

  ## Example
  ```js
  console.log(1)
　```

And then convert with both Snarkdown + PrismJS.

I've tried many things but I'm failing to succeed in this task! 😅

I think the community at large will greatly benefit from an example like this in the readme!

Given this sample Markdown file:

https://gist.githubusercontent.com/thdoan/07518c0eec8804390d0938a647766f2e/raw/e50b354206d8bc71894762ce1bb5150879d610cf/sample.md

<p>---</p>

I’m inspired by how tiny this library is... I’d love to be able to use it to power something like https://www.npmjs.com/package/markdown-to-jsx.

Test case:

snarkdown(`<a href="/foo_bar_baz.html">link</a>`)

JSFiddle link

expected result:

<a href="/foo_bar_baz.html">link</a>

actual result:

<a href="/foo<em>bar</em>baz.html">link</a>

I was wondering if we can make snarkdown pluggable. So the core module remains minimal and developers can use plugins to enhance the conversion as and how they need. What do you say @developit ?

Hi @developit ,
We are cdnjs team, we're going to host this library.
Would you mind giving me some suggestion about snarkdown.es.js?
I know this file is work fine in Nodejs environment, but not sure this file can be also work fine in browser (web front-end), like <script src="snarkdown.es.js"></script>

If you have any suggestions, please let me know.
Thank you.

cdnjs/cdnjs#11830

1. goto Snarky
2. attempt to format text with strike through via ~

Results

it renders the ~ as regular text... should be strike through

Failing test...

it('parses strike through', () => {
  expect(snarkdown('I like ~HUGE~ tiny libraries')).to.equal('I like <s>HUGE</s> tiny libraries');
});

E.g. <img src onerror="alert(1)"/> will execute arbitrary JavaScript. It would be good to either document this very explicitly or to prevent this security issue from ever happening.

Update: Non-HTML Vulnerability: #70 (comment)

This may be out of scope for this project, but snake_case currently will italicize case. I believe underscores should only create emphasis if they're surrounded by whitespace _like this_

Snarkdown:

Commonmark:

• Port tooling from mitt or unfetch
• Switch from custom trim() to String.prototype.trim()
• Remove likely unnecessary pretty-printing whitespace

input

this\*is\*important

actual

this\*is\*important

expected
https://babelmark.github.io/?text=this%5C*is%5C*important

this*is*important

To be more attractive. And because it would look awesome, like seen in the posted tweet intro.

Gif that switches between - 1f63b and 1f63c from emojione.

Something like

but i'm not good at that :D

Right now snarkdown generates excessive <br/> tag at the end of html.

With markdown like this:

hello [World]

[world]: http://world.com

You'll get this html:

hello <a href="http://world.com">World</a><br />

The easiest fix will be to move replace for trailing newlines to the end of this code:

md = md.replace(/^\n+|\n+$/g, '').replace(/^\[(.+?)\]:\s*(.+)$/gm, (s, name, url) => {
	links[name.toLowerCase()] = url;
	return '';
});

There's no types for the package available, both within the package or using @types/snarkdown. 😢

hi,
trying to understand the regex, I failed glorious. ;-)

I noticed:

#### is parsed to <h1>
##### is parsed to <h2>
###### is parsed to <h3>

easily tested in https://snarky.surge.sh/
Is that intended?

https://babelmark.github.io/?text=Test

In order to make PrismJS syntax highlighting work, it requires all code blocks to be formatted like so:

<pre>
  <code>
// the code
  </code>
</pre>

But snarkdown only uses <pre> without <code>.

My request is that snarkdown uses <pre><code> by default OR via an option.

From the PrismJS docs:

Encourages good author practices. Other highlighters encourage or even force you to use elements that are semantically wrong, like <pre> (on its own) or <script>. Prism forces you to use the correct element for marking up code: <code>. On its own for inline code, or inside a <pre> for blocks of code. In addition, the language is defined through the way recommended in the HTML5 draft: through a language-xxxx class.

https://prismjs.com/#features-full

When installing from npm (Version 1.2.2), I end up without the type declarations.
See https://unpkg.com/browse/[email protected]/ for a list of files in the package.

Are these being omitted when publishing to npm? Is the version on npm simply outdated?

Describe the bug
Markdown code not formatting correctly on uptime website.

To Reproduce

Comment on issue with some code using `````` triple backticks
Go to issue on website
Expected behavior
Code block in html

Screenshots
image

Issue in GitHub with proper code formatting: iskconpandavasena/uptime#1
Issue on website without proper code formatting: https://uptime.psena.com/incident/1

Desktop (please complete the following information):

OS: MacOS
Browser Chrome
Version 87.0

I made a mistake, pls delete

I'd love this syntax to work:

:::
some info card
:::

from the pandoc docs:
https://pandoc.org/MANUAL.html#divs-and-spans

Y'all may be able to appreciate the technique behind my parser which is also minimalist ~1.5KB minified.

It doesn't support all the cases (still need to add image, table, blockquote) but it supported enough to make this full set of documentation, lol:

https://mikesmullin.github.io/m-js/

the secret is between the regex and the reusable chunker() function, also how regex is used by the lexer with special 1-character symbols representing fully parsed tokens.

it parses to JXML instead of HTML but once you understand how simple it is you can see how it would be easy to adapt without adding extra lines.

that is all 🐱 feel free to assimilate any ideas on your quest for a sub-1k parser. thanks for your time.

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

Your Greenkeeper Bot 🌴

On Firefox,
Uncaught SyntaxError: export declarations may only appear at top level of a module

On this line

This bugs occur on both the latest release and the source code

i just saw it's not working, any idea how to make this work ?

If you try to put an '---' after a code block, it doesn't parse it correctly.

Easy sample tested with the Preact App:

Text into

---

But, not this

    Sample Code Block

---

test

Not sure what other combinations are an issue, but FYI.

hard to do outside

I'm just curious shouldn't multiple newlines be transformed to paragraphs, not linebreaks? This was intended for some reason?

When sending snarkdown a string in template literals/back ticks it doesn't render it.

Thanks for taking the time to release 2.0!
I'm really excited!!

are there any breaking changes we should know of ? this wasn't clear from the release notes.

Solved it by .replace(/\r\n/g, '\n') prior to parsing.

Feel free to [won't fix] this issue - \r\n are weird anyway.

What is explicitly handled by snarkdown -

https://babelmark.github.io/?text=*foo

Hey!
I love this small footprint!!

I'd love to be able to write:
```js
console.log() // etc.
```
with javascript code and have syntax highlighting for the code block. ;)

I researched a bit and found out I'd need to use Prism
https://prismjs.com

Is it possible to add a small example to the readme to show the best practice of how this could be done? 😄

Thanks so much!!

I have included Snarkdown on like this:

But returns 2 errors:

How do I fix this?

The markdown angle bracket syntax (https://www.markdownguide.org/basic-syntax#urls-and-email-addresses) for quickly creating links currently does not work.

Eg.
<https://github.com> should convert into <a>https://github.com</a>. Instead, it is simply left as-is and will render as a HTML element.

Example using the angle input in the github renderer/editor:
https://github.com

I'm trying to use an asterisk in my string but it makes everything after is Italic. I believe this behaviour is unexpectes.

Input:

This string has something *important, so I use an asterisk.

Expected:
This string has something *important, so I use an asterisk.

Actual:
This string has something *important, so I use an asterisk.

If this behaviour is expected I then one should resort to escaping the said character, however this also produces an undesirable result.

Input:

This string has something \*important, so I use an asterisk.

Expected:
This string has something *important, so I use an asterisk.

Actual:
This string has something \*important, so I use an asterisk.

I would like to have nested lists. I cannot get them to work. I tried various "styles" (e.g., 2 spaces, 4 spaces). See example below.

Example

Markdown input

* Fruit
  * Apple
  * Orange
* Milk
  * Cheese

Expected output

<ul>
  <li>Fruit
    <ul>
      <li>Apple</li>
      <li>Orange</li>
    </ul>
  </li>
  <li>Milk
    <ul>
      <li>Cheese</li>
    </ul>
  </li>
</ul>

Actual output

<ul>
  <li>Fruit</li>
</ul>
<em> Apple</em> 
Orange
<ul>
  <li>Milk</li>
</ul>
<em> Cheese</em>

Context

snarkdown 2.0.0

How would you convert the simple editor example into a preact component ?

let $ = document.querySelector.bind(document);
let html = snarkdown($('#in').value);
$('#out').innerHTML = html;
$('#code').textContent = html;

Is there a plan to support date formatting already in this library?