npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

domador

v2.4.4

Published

Dependency-free and lean DOM parser that outputs Markdown

Downloads

114

Readme

Domador

Build Status

Dependency-free and lean DOM parser that outputs Markdown

You can use it on the server-side as well, thanks to jsdom. The client-side version leverages the browser DOM. Originally based on html-md.

Install

You can get it on npm.

npm install domador --save

Or bower, too.

bower install domador --save

domador(input, options?)

Converts DOM tree (or HTML string) input into Markdown. domador takes the following options.

absolute

Convert relative links into absolute ones automatically.

href

The document's href, necessary for the absolute option to work properly outside of a browser environment.

inline

Links ([foo](/bar)) and image sources (![foo](/bar)) are inlined. By default, they are added as footnote references [foo][1]\n\n[1]: /bar.

fencing

The western art of combat with rapiers or rapier-like swords. It can also be set to true to use fences like instead of spaces when delimiting code blocks.

fencinglanguage

If fencing is enabled, fencinglanguage can be a function that will run on every <pre> element and returns the appropriate language in the fence. If the <pre> element contains a <code> element as its first child, fencinglanguage will be executed for that element as well in search of a match.

If nothing is returned, a language won't be assigned to the fence. The example below returns fence languages according to a md-lang-{language} class found on the pre element.

function fencinglanguage (el) {
  var match = el.className.match(/md-lang-((?:[^\s]|$)+)/);
  if (match) {
    return match.pop();
  }
}
allowFrame

When set to a function, allowFrame receives the src attribute for an <iframe> and domador expects a boolean in return. If the return value is true then the <iframe> will be added to the Markdown output.

domador(el, {
  allowFrame: function (src) {
    return src.indexOf('https://google.com/') === 0;
  }
});
tables

Domador understands well-formed HTML <table> structures and spits out GitHub flavored Markdown tables. This functionality is enabled by default but you can turn it off by setting tables to false.

transform

Allows you to take over the default transformation for any given DOM element. Ignore elements you don't want to override, and return Markdown for the ones you want to change. This method is executed on every single DOM element that's parsed by domador. The example below converts links that start with @ into mentions like @bevacqua instead of traditional Markdown links like [@bevacqua](/users/bevacqua). This is particularly useful to transform Markdown-generated HTML back into the original Markdown when your Markdown parser has special tokenizers or hooks.

domador(el, {
  transform: function (el) {
    if (el.tagName === 'A' && el.innerHTML[0] === '@') {
      return el.innerHTML;
    }
  }
});
markers

Advanced option. Setting markers to an array such as [[0, 'START'], [10, 'END']] will place each of those markers in the output, based on the input index you want to track. This feature is necessary because there is no other reliable way of tracking a text cursor position before and after a piece of HTML is converted to Markdown.

The following example shows how markers could be used to preserve a text selection across HTML-into-Markdown parsing, by providing markers for each cursor. When the output from domador comes back, all you need to do is find your markers, remove them, and place the text selection at their indices. The woofmark Markdown/HTML/WYSIWYG editor module leverages this functionality to do exactly that.

domador('<strong>foo</strong>', {
  markers: [[5, '[START]'], [10, '[END]']]
});
// <- '**[START]fo[END]o**'

Also note that, as shown in the example above, when a marker can't be placed in the output exactly where you asked for, it'll be cleanly placed nearby. In the above example, the [START] marker would've been placed "somewhere inside" the opening ** tag, but right after the opening tag finishes was preferred.

Tests

Read the unit tests for examples of expected output and their inputs. Run unit tests using the command below.

npm test

Disclaimer

Don't expect this to work for arbitrary HTML, it is intended to restore HTML compiled from a Markdown source back into Markdown.

License

MIT