A simple way to do *only* inline elements

[thedamon]

I'm wanting a reliable way of entering "HTML" content but not at the block level (ie just the inline level rendering). Markdown provides an awesome interface, but I'm not sure a good 'lite' approach. I am considering writing a renderer that just returns itself for each of the block level functions, but that's adding even more logic when I don't even need it

I wonder if there would be an easy way to split out only the inline parsing either as an option, or an alternate bundle (or possibly a quick way to write custom renderer in a more simple way than overriding every block element). I recognize this is a bit of an edge case, but I think this provides an awesome way for safely entering certain content in a CMS context (links, strong, em) where headers or lists or even a p tag would really through things off. (ie input labels, link content, header content where the header pre-exists, etc)

[styfle]

Hi Damon,

I think what you want is a HTML Sanitizer so you can choose what tags are acceptable for your use case.

You could run the user's input through marked which emits HTML. Then run that HTML through a sanitizer to strip tags that are not acceptable by defining which tags are allowed.

This comment has a list of choices to choose from.

I personally have used sanitize-html like so:

const marked = require('marked');
const sanitize = require('sanitize-html');
const html = marked(markdownStringFromUser);
const cleanHtml = sanitize(html, {
            allowedTags: [
                'a',
                'b',
                'p',
                'i',
                'em',
                'strong',
                'blockquote',
                'big',
                'small',
                'div',
                'br',
                'hr',
                'li',
                'ol',
                'ul',
                'table',
                'tbody',
                'thead',
                'td',
                'th',
                'tr',
                'caption',
                'span'
            ],
            allowedAttributes: {
                'a': ['href', 'target', 'rel'],
            },
            transformTags: {
                'a': (tagName, attribs) => {
                    // Always open links in a new window
                    if (attribs) {
                        attribs.target = '_blank';
                        attribs.rel = 'noopener noreferrer';
                    }
                    return { tagName, attribs };
                }
            },
        });