Git Product home page Git Product logo

render-readme's Introduction

Render and sanitize readme.md just like github would.

Basically, it's node.js version for this: https://github.com/github/markup

But only for markdown for now, because that's what io.js packages use mostly.

API

require('render-readme')('Hello, *world*!')

// outputs '<p>Hello, <em>world</em>!</p>\n'

Features

  • the basic rendering is commonmark + gfm extensions (emphasis slightly differs, but nobody cares anyway)
  • html is sanitized, the configuration is similar to github stuff (using sanitize-html)
  • syntax highlighting (using highlight-js for this one)
  • YAML metadata on top of markdown documents is rendered to a table
  • anchors for headers (<a name="blah"> instead of <a id="user-content-blah">, but should be good enough)

render-readme's People

Contributors

rlidwka avatar smrq avatar kenany avatar

Stargazers

 avatar Dan Flettre avatar Mathieu M-Gosselin avatar  avatar Jerzerak avatar Jon Schlinkert avatar Yosh avatar

Watchers

James Cloos avatar  avatar Mathieu M-Gosselin avatar  avatar

render-readme's Issues

Very slow when parsing long strings of dashes inside code blocks

Pulled out of an example containing a multipart/form-data upload. As more dashes are added the rendering seems to take exponentially more time.

→ time node -e 'require("render-readme")("\`\`\`\n------------\n\`\`\`")'                                      
node -e   0.48s user 0.07s system 102% cpu 0.541 total
→ time node -e 'require("render-readme")("\`\`\`\n------------------------------\n\`\`\`")'
node -e   60.09s user 1.42s system 105% cpu 58.180 total

Sanitization strips out actual content

The sanitization is a bit overzealous, which can remove real content. Example:

render('```sh\n$ gulp test\n```');

Yields

<pre><code class="lang-sh">$ gulp \n</code></pre>\n

The word "test" is removed because pre-sanitization it looks like...

<pre><code class="lang-sh">$ gulp <span class="hljs-built_in">test</span>\n</code></pre>\n

Note the underscore in the hljs-built_in class, which doesn't match the regexp in the sanitizer.

Non-blank line followed by header line does not render header

Hi,

It looks like render-readme does not render a header line if the previous line contains any text. Every other Mark Down render that I have seen (GitHub, MacDown, WebStorm) renders this scenario by adding the <h#> tag on the header line. I believe this is the expected result.

Render Readme Example
//Multiple new line examples
console.log(require('render-readme')('<a name="MyClass"></a>\n\n' +
    '## MyClass(config)'));
/*
Expected
 <p><a name="MyClass"></a></p>
 <h2><a name="myclass-config-"></a>MyClass(config)</h2>
 */

console.log(require('render-readme')('Some Text\n\n' +
    '## MyClass(config)'));
/*
Expected
 <p>Some Text</p>
 <h2><a name="myclass-config-"></a>MyClass(config)</h2>
 */

//only one new line examples
console.log(require('render-readme')('<a name="MyClass"></a>\n' +
    '## MyClass(config)'));
/*
Not Expected
 <p><a name="MyClass"></a>
 ## MyClass(config)</p>
 */

console.log(require('render-readme')('Some Text\n' +
    '## MyClass(config)'));
/*
Not Expected
 <p>Some Text
 ## MyClass(config)</p>
 */
GitHub example
some text followed by
###### header on the next line

some text follow by

header on the next line

Strings of dashes in code blocks are removed

Related to #4 long strings of dashes in code blocks seem to become a single dash

→ node -e 'console.log(require("render-readme")("\`\`\`\n------------------------------\n\`\`\`"))'       
<pre><code>-</code></pre>

they come through fine from markdown-it

→ node -e 'console.log(require("markdown-it")().render("\`\`\`\n------------------------------\n\`\`\`"))'
<pre><code>------------------------------
</code></pre>

Allow base64 images

Hi,

I would like to have base64 images, so I changed the allowedSchemes.

allowedSchemes    : $w('http https mailto github-windows github-mac data'),

I would recommend to enable this for everyone using this module. What do you think?

Heading anchor tags do not match Github

Hello!

Thanks for putting this package together! I've run across an issue where the heading anchor tags generated do not quite match what Github generates. This causes some issues when where we can't have links between pages that work in both Github as well as on our site.

There are two distinct issues:

  1. Punctuation is transformed into dashes when it should be filtered
  • Example: ## ((test))
    • markup anchor: test
    • render-readme anchor: --test--
  1. Duplicate anchors are not handled
    • If two anchor names are duplicated, Github will make them unique
    • Example: ## test\n ## test\n ## test\n
      • markup: test test-1 test-2
      • render-readme: test test test

Here is the ruby code behind generating anchors:
https://github.com/jch/html-pipeline/blob/master/lib/html/pipeline/toc_filter.rb#L35

I think filtering out punctuation in the same way (/[^\w\- ]/) will solve number 1 above.

Number 2 above will need some extra code...

Would you be willing to accept PRs for these updates?

Add support for AsciiDoc

We use AsciiDoc for all textual documents, including readmes in npm modules. It would be great if Sinopia can render even AsciiDoc. There’s a JS version of Asciidoctor, asciidoctor.js, that can be used for it.

I’d like to implement it, but this module doesn’t seem to be prepared extending for other markups…?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.