• Stars
    star
    104
  • Rank 330,604 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 10 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐Ÿ˜ป Markdown with easy tokenization, a fast highlighter, and a lean HTML sanitizer

megamark

markdown-it with easy tokenization, a fast highlighter, and a lean HTML sanitizer

Megamark is markdown-it plus a few reasonable factory defaults.

  • Markdown parsing via markdown-it
  • HTML is sanitized via insane, and that's configurable
  • Code is highlighted with highlight.js (on a diet in the client-side!)
  • Tokenization made easy: turn those @ mentions into links in no-time!
  • Text gets prettified just like you're used to from marked's smartypants
  • You can highlight interesting content using <mark> tags, even inside code blocks
  • Headings get unique id, helping you implement navigation in your Markdown documents
  • Still manages to produce a small footprint

Install

npm install megamark --save
bower install megamark --save

megamark(markdown, options?)

The markdown input will be parsed via markdown-it. Megamark configures markdown-it for syntax highlighting, prefixing classes with md-. Output is sanitized via insane, and you can configure the whitelisting process too.

options.tokenizers

Tokenizers can help you transform bits of text like @bevacqua into links. This is often a very useful feature for your users, but hardly ever implemented by developers because how convoluted it is. With megamark, it becomes a pretty easy thing to do.

megamark('Who is this @bevacqua person?', {
  tokenizers: [{
    token: /(^|\s)@([A-z]+)\b/g,
    transform: function (all, separator, username) {
      return separator + '<a href="/' + username + '">' + all + '</a>';
    }
  }]
});
// <- '<p>Who is this <a href='/bevacqua'>@bevacqua</a> person?</p>\n'

The transform method will get all of the arguments of text.match(token), so the first argument will be text, followed by any capturing groups. In our case, the /(^|\s)@([A-z]+)\b/ can be decomposed as follows.

  • First off we have (?:^|\s)
    • The parenthesis delimit a capturing group
    • It'll be passed to transform as the second argument
    • ^|\s means that we are looking to match either the start of input or a space character
    • We can't use \b instead of this expression because @ is not a word character
  • Then there's the @ literal
  • Another capturing group, ([A-z]+)
    • It'll be passed to transform as the third argument
    • Matches one or more alphabet characters
  • Finally, \b means that we want to match everything up to a word boundary

You can use any regular expression you want, but make sure to use the g modifier if you want to match multiples of any given token.

options.linkifiers

Linkifiers are a simpler kind of tokenizer, but they're also more limited. Instead of asking you for a token expression, linkifiers will run on every single user-provided link (that's in plain text, such as ponyfoo.com, note that actual links such as [ponyfoo](http://ponyfoo.com) won't be affected by this). If an HTML string is returned from your linkifier, then that'll be used. If none of your linkifiers return an HTML string, then the original functionality of converting the link text into an HTML link will be used.

Linkifiers are run one by one. The first linkifier to return a string will stop the rest of the linkifiers from ever running. Each linkifier receives an href argument and a text argument, containing the actual link and the text that should go in the link. These are just hints, you can return arbitrary HTML from your linkifier method, even something other than anchor links.

Example

Return '' when you want to completely ignore a link. Maybe use a condition where you whitelist links from origins you're happy with.

megamark('ponyfoo.com', {
  linkifiers: [function (href, text) {
    return '';
  }]
});
// <- '<p></p>\n'
Example

A real use case for this type of tokenizer is prettifying the text on the link. This is particularly useful for links on your own domain. The example below converts links that would be turned into <a href='http://localhost:9000/bevacqua/stompflow/issues/28'>http://localhost:9000/bevacqua/stompflow/issues/28</a> into <a href='http://localhost:9000/bevacqua/stompflow/issues/28' class='issue-id'>#28</a> instead.

megamark('http://localhost:9000/bevacqua/stompflow/issues/28', {
  linkifiers: [function (href, text) {
    return "<a href='" + href + "' class='issue-id'>#" + href.split('/').pop() + "</a>";
  }]
});
// <- '<p><a href='http://localhost:9000/bevacqua/stompflow/issues/28' class='issue-id'>#28</a></p>\n'

options.sanitizer

These configuration options will be passed to insane. The defaults from insane are used by default.

options.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 Markdown is converted to HTML.

The following example shows how markers could be used to preserve a text selection across Markdown-into-HTML parsing, by providing markers for each cursor. When the output from megamark 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.

megamark('**foo**', {
  markers: [[1, '[START]'], [4, '[END]']]
});
// <- '<strong>[START]fo[END]o</strong>'

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 <strong> tag, but right after the opening tag finishes was preferred.

License

MIT

More Repositories

1

dragula

๐Ÿ‘Œ Drag and drop so simple it hurts
JavaScript
21,936
star
2

es6

๐ŸŒŸ ES6 Overview in 350 Bullet Points
4,328
star
3

rome

๐Ÿ“† Customizable date (and time) picker. Opt-in UI, no jQuery!
JavaScript
2,913
star
4

js

๐ŸŽจ A JavaScript Quality Guide
2,874
star
5

fuzzysearch

๐Ÿ”ฎ Tiny and blazing-fast fuzzy search in JavaScript
JavaScript
2,711
star
6

woofmark

๐Ÿ• Barking up the DOM tree. A modular, progressive, and beautiful Markdown and HTML editor
JavaScript
1,624
star
7

promisees

๐Ÿ“จ Promise visualization playground for the adventurous
JavaScript
1,199
star
8

horsey

๐Ÿด Progressive and customizable autocomplete component
JavaScript
1,167
star
9

css

๐ŸŽจ CSS: The Good Parts
992
star
10

react-dragula

๐Ÿ‘Œ Drag and drop so simple it hurts
JavaScript
992
star
11

contra

๐Ÿ„ Asynchronous flow control with a functional taste to it
JavaScript
771
star
12

shots

๐Ÿ”ซ pull down the entire Internet into a single animated gif.
JavaScript
728
star
13

insignia

๐Ÿ”– Customizable tag input. Progressive. No non-sense!
JavaScript
674
star
14

campaign

๐Ÿ’Œ Compose responsive email templates easily, fill them with models, and send them out.
JavaScript
641
star
15

perfschool

๐ŸŒŠ Navigate the #perfmatters salt marsh waters in this NodeSchool workshopper
CSS
630
star
16

local-storage

๐Ÿ›… A simplified localStorage API that just works
JavaScript
523
star
17

angularjs-dragula

๐Ÿ‘Œ Drag and drop so simple it hurts
HTML
509
star
18

reads

๐Ÿ“š A list of physical books I own and read
486
star
19

insane

๐Ÿ˜พ Lean and configurable whitelist-oriented HTML sanitizer
JavaScript
449
star
20

hget

๐Ÿ‘ Render websites in plain text from your terminal
HTML
334
star
21

hit-that

โœŠ Render beautiful pixel perfect representations of websites in your terminal
JavaScript
332
star
22

hash-sum

๐ŸŽŠ Blazing fast unique hash generator
JavaScript
301
star
23

swivel

Message passing between ServiceWorker and pages made simple
JavaScript
294
star
24

dominus

๐Ÿ’‰ Lean DOM Manipulation
JavaScript
277
star
25

trunc-html

๐Ÿ“ truncate html by text length
JavaScript
220
star
26

grunt-ec2

๐Ÿ“ฆ Create, deploy to, and shutdown Amazon EC2 instances
JavaScript
190
star
27

beautify-text

โœ’๏ธ Automated typographic quotation and punctuation marks
JavaScript
186
star
28

sixflix

๐ŸŽฌ Detects whether a host environment supports ES6. Algorithm by Netflix.
JavaScript
175
star
29

twitter-for-github

๐Ÿฅ Twitter handles for GitHub
JavaScript
146
star
30

awesome-badges

๐Ÿ† Awesome, badges!
JavaScript
124
star
31

prop-tc39

Scraping microservice for TC39 proposals ๐Ÿ˜ธ
JavaScript
108
star
32

diferente

User-friendly virtual DOM diffing
JavaScript
95
star
33

domador

๐Ÿ˜ผ Dependency-free and lean DOM parser that outputs Markdown
JavaScript
86
star
34

proposal-undefined-coalescing-operator

Undefined Coalescing Operator proposal for ECMAScript
77
star
35

dotfiles

๐Ÿ’  Yay! @bevacqua does dotfiles \o/
Shell
75
star
36

assignment

๐Ÿ˜ฟ Assign property objects onto other objects, recursively
JavaScript
73
star
37

sektor

๐Ÿ“ A slim alternative to jQuery's Sizzle
JavaScript
65
star
38

map-tag

๐Ÿท Map template literal expression interpolations with ease.
JavaScript
65
star
39

unbox

Unbox a node application with a well-designed build-oriented approach in minutes
JavaScript
61
star
40

hint

Awesome tooltips at your fingertips
JavaScript
60
star
41

but

๐Ÿ›ฐ But expands your functional horizons to the edge of the universe
JavaScript
59
star
42

kanye

Smash your keyboards with ease
JavaScript
55
star
43

correcthorse

See XKCD for reference
JavaScript
52
star
44

easymap

๐Ÿ—บ simplified use of Google Maps API to render a bunch of markers.
JavaScript
52
star
45

flickr-cats

A demo page using the Flickr API, ServiceWorker, and plain JavaScript
HTML
49
star
46

hubby

๐Ÿ‘จ Hubby is a lowly attempt to describe public GitHub activity in natural language
JavaScript
46
star
47

ruta3

Route matcher devised for shared rendering JavaScript applications
JavaScript
45
star
48

poser

๐Ÿ“ฏ Create clean arrays, or anything else, which you can safely extend
JavaScript
45
star
49

baal

๐Ÿณ Automated, autoscaled, zero-downtime, immutable deployments using plain old bash, Packer, nginx, Node.js, and AWS. Made easy.
Shell
44
star
50

lipstick

๐Ÿ’„ sticky sessions for Node.js clustering done responsibly
JavaScript
43
star
51

crossvent

๐ŸŒ Cross-platform browser event handling
JavaScript
41
star
52

lazyjs

The minimalist JavaScript loader
JavaScript
39
star
53

spritesmith-cli

๐Ÿ˜ณ Adds a CLI to the spritesmith module
JavaScript
38
star
54

gulp-jsfuck

Fuck JavaScript and obfuscate it using only 6 characters ()+[]!
JavaScript
37
star
55

measly

A measly wrapper around XHR to help you contain your requests
JavaScript
36
star
56

keynote-extractor

๐ŸŽ Extract Keynote presentations to JSON and Markdown using a simple script.
AppleScript
35
star
57

hyperterm-working-directory

๐Ÿ–ฅ๐Ÿ‘ท๐Ÿ“‚ Adds a default working directory setting. Opens new tabs using that working directory.
JavaScript
34
star
58

gitcanvas

๐Ÿ› Use your GitHub account's commit history as a canvas. Express the artist in you!
JavaScript
34
star
59

cave

Remove critical CSS from your stylesheet after inlining it in your pages
JavaScript
33
star
60

scrape-metadata

๐Ÿ“œ HTML metadata scraper
JavaScript
31
star
61

feeds

๐ŸŽ RSS feeds I follow and maintain
31
star
62

suchjs

Provides essential jQuery-like methods for your evergreen browser, in under 200 lines of code. Such small.
JavaScript
30
star
63

ponyedit

An interface between contentEditable and your UI
JavaScript
29
star
64

grunt-grunt

Spawn Grunt tasks in other Gruntfiles easily from a Grunt task
JavaScript
29
star
65

ultramarked

Marked with built-in syntax highlighting and input sanitizing that doesn't encode all HTML.
JavaScript
28
star
66

sell

๐Ÿ’ฐ Cross-browser text input selection made simple
JavaScript
28
star
67

icons

Free icon sets gathered around the open web
27
star
68

insert-rule

Insert rules into a stylesheet programatically with a simple API
JavaScript
26
star
69

hose

Redirect any domain to localhost for convenience or productivity!
JavaScript
26
star
70

ponymark

Next-generation PageDown fork
JavaScript
25
star
71

omnibox

Fast url parsing with a tiny footprint and extensive browser support
JavaScript
25
star
72

estimate

Calculate remaining reading time estimates in real-time
JavaScript
24
star
73

node-emoji-random

Creates a random emoji string. This is as useless as it gets.
JavaScript
24
star
74

sluggish

๐Ÿ Sluggish slug generator that works universally
JavaScript
24
star
75

seleccion

๐Ÿ’ต A getSelection polyfill and a setSelection ranch dressing
JavaScript
24
star
76

bullseye

๐ŸŽฏ Attach elements onto their target
JavaScript
23
star
77

vectorcam

๐ŸŽฅ Record gifs out of <svg> elements painlessly
JavaScript
22
star
78

paqui

Dead simple, packager-agnostic package management solution for front-end component developers
JavaScript
22
star
79

grunt-ngdoc

Grunt task for generating documentation using AngularJS' @ngdoc comments
JavaScript
20
star
80

ftco

โšก Browser extension that unshortens t.co links in TweetDeck and Twitter
JavaScript
19
star
81

jadum

๐Ÿ’ A lean Jade compiler that understands Browserify and reuses partials
JavaScript
19
star
82

trunc-text

๐Ÿ“ truncate text by length, doesn't cut words
JavaScript
16
star
83

flexarea

Pretty flexible areas!
JavaScript
16
star
84

music-manager

๐Ÿ“ป Manages a list of favorite artists and opens playlists on youtube.
JavaScript
16
star
85

grunt-integration

Run Integration Tests using Selenium, Mocha, a Server, and a Browser
JavaScript
15
star
86

apartment

๐Ÿก Remove undesirable properties from a piece of css
JavaScript
14
star
87

mongotape

Run integration tests using mongoose and tape
JavaScript
14
star
88

rehearsal

Persist standard input to a file, then simulate real-time program execution.
JavaScript
13
star
89

queso

Turn a plain object into a query string
JavaScript
13
star
90

bitfin

๐Ÿฆ Finance utility for Bitstamp
JavaScript
13
star
91

pandora-box

๐Ÿผ What will it be?
JavaScript
12
star
92

grunt-spriting-example

An example on how to seamlessly use spritesheets with Grunt.
12
star
93

artists

๐ŸŽค Big list of artists pulled from Wikipedia.
JavaScript
11
star
94

twitter-leads

๐Ÿฆ Pull list of leads from a Twitter Ads Lead Generation Card
JavaScript
11
star
95

reaver

Minimal asset hashing CLI and API
JavaScript
11
star
96

atoa

Creates a true array based on `arraylike`, starting at `startIndex`.
JavaScript
10
star
97

BridgeStack

.NET StackExchange API v2.0 client library wrapper
C#
10
star
98

ama

๐Ÿ“– A repository to ask @bevacqua anything.
10
star
99

virtual-host

Create virtual, self-contained `connect` or `express` applications using a very simple API.
JavaScript
10
star
100

banksy

๐ŸŒ‡ Street art between woofmark and horsey
JavaScript
10
star