developit / snarkdown Goto Github PK
View Code? Open in Web Editor NEW:smirk_cat: A snarky 1kb Markdown parser written in JavaScript
Home Page: http://jsfiddle.net/developit/828w6t1x/
License: MIT License
:smirk_cat: A snarky 1kb Markdown parser written in JavaScript
Home Page: http://jsfiddle.net/developit/828w6t1x/
License: MIT License
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.
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>
snarkdown 2.0.0
I made a mistake, pls delete
input
this\*is\*important
actual
this\*is\*important
expected
https://babelmark.github.io/?text=this%5C*is%5C*important
this*is*important
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?
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
Two things are unexpected here:
<strong>
and <a>
tags are closed in the same order in which they're opened.<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
I'm just curious shouldn't multiple newlines be transformed to paragraphs, not linebreaks? This was intended for some reason?
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?
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.
What is explicitly handled by snarkdown -
Line 155 in b01a5cd
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.
There's no types for the package available, both within the package or using @types/snarkdown
. 😢
Test case:
snarkdown(`<a href="/foo_bar_baz.html">link</a>`)
expected result:
<a href="/foo_bar_baz.html">link</a>
actual result:
<a href="/foo<em>bar</em>baz.html">link</a>
i just saw it's not working, any idea how to make this work ?
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 '';
});
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.
When using as live editor it crashes/freezes active tab
_
or *
in textarea within your demo http://jsfiddle.net/developit/828w6t1x/Havoc will follow :(
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
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
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!
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 alanguage-xxxx
class.
Similar to WebReflection/lightdown#1
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:
Thanks for reading
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
Given this sample Markdown file:
<p>---</p>
STR:
Expected:
Actual:
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!
I'd love this syntax to work:
:::
some info card
:::
from the pandoc docs:
https://pandoc.org/MANUAL.html#divs-and-spans
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 😸
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>
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 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 ?
hard to do outside
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.
To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:
.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.
Greenkeeper has checked the engines
key in any package.json
file, the .nvmrc
file, and the .travis.yml
file, if present.
engines
was only updated if it defined a single version, not a range..nvmrc
was updated to Node.js 10.travis.yml
was only changed if there was a root-level node_js
that didn’t already include Node.js 10, such as node
or lts/*
. In this case, the new version was appended to the list. We didn’t touch job or matrix configurations because these tend to be quite specific and complex, and it’s difficult to infer what the intentions were.For many simpler .travis.yml
configurations, this PR should suffice as-is, but depending on what you’re doing it may require additional work or may not be applicable at all. We’re also aware that you may have good reasons to not update to Node.js 10, which is why this was sent as an issue and not a pull request. Feel free to delete it without comment, I’m a humble robot and won’t feel rejected 🤖
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
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)
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;
Solved it by .replace(/\r\n/g, '\n')
prior to parsing.
Feel free to [won't fix]
this issue - \r\n
are weird anyway.
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.
Is there a plan to support date formatting already in this library?
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.
~
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');
});
When sending snarkdown a string in template literals/back ticks it doesn't render it.
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.
mSrc [, options ])
generated unexpected link:
mSrc <a href="undefined">, options </a>)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.