Coder Social home page Coder Social logo

micromark / micromark-extension-gfm Goto Github PK

View Code? Open in Web Editor NEW
26.0 7.0 2.0 135 KB

micromark extension to support GFM (GitHub Flavored Markdown)

Home Page: https://unifiedjs.com

License: MIT License

JavaScript 100.00%
micromark micromark-extension gfm github flavored markdown table strikethrough autolink tagfilter

micromark-extension-gfm's Introduction

micromark-extension-gfm

Build Coverage Downloads Size Sponsors Backers Chat

micromark extensions to support GitHub flavored markdown (GFM).

Contents

What is this?

This package contains extensions that add support for all features enabled by GFM to micromark. It supports autolink literals, footnotes, strikethrough, tables, tagfilter, and tasklists.

When to use this

This project is useful when you want to support GFM in markdown.

You can use these extensions when you are working with micromark. Alternatively, you can also use the underlying features separately:

When you need a syntax tree, combine this package with mdast-util-gfm.

All these packages are used in remark-gfm, which focusses on making it easier to transform content by abstracting these internals away.

Install

This package is ESM only. In Node.js (version 16+), install with npm:

npm install micromark-extension-gfm

In Deno with esm.sh:

import {gfm, gfmHtml} from 'https://esm.sh/micromark-extension-gfm@3'

In browsers with esm.sh:

<script type="module">
  import {gfm, gfmHtml} from 'https://esm.sh/micromark-extension-gfm@3?bundle'
</script>

Use

Say our document example.md contains:

# GFM

## Autolink literals

www.example.com, https://example.com, and [email protected].

## Footnote

A note[^1]

[^1]: Big note.

## Strikethrough

~one~ or ~~two~~ tildes.

## Table

| a | b  |  c |  d  |
| - | :- | -: | :-: |

## Tag filter

<plaintext>

## Tasklist

* [ ] to do
* [x] done

…and our module example.js looks as follows:

import fs from 'node:fs/promises'
import {micromark} from 'micromark'
import {gfm, gfmHtml} from 'micromark-extension-gfm'

const output = micromark(await fs.readFile('example.md'), {
  allowDangerousHtml: true,
  extensions: [gfm()],
  htmlExtensions: [gfmHtml()]
})

console.log(output)

…now running node example.js yields:

<h1>GFM</h1>
<h2>Autolink literals</h2>
<p><a href="http://www.example.com">www.example.com</a>, <a href="https://example.com">https://example.com</a>, and <a href="mailto:[email protected]">[email protected]</a>.</p>
<h2>Footnote</h2>
<p>A note<sup><a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref="" aria-describedby="footnote-label">1</a></sup></p>
<h2>Strikethrough</h2>
<p><del>one</del> or <del>two</del> tildes.</p>
<h2>Table</h2>
<table>
<thead>
<tr>
<th>a</th>
<th align="left">b</th>
<th align="right">c</th>
<th align="center">d</th>
</tr>
</thead>
</table>
<h2>Tag filter</h2>
&lt;plaintext>
<h2>Tasklist</h2>
<ul>
<li><input type="checkbox" disabled="" /> to do</li>
<li><input type="checkbox" disabled="" checked="" /> done</li>
</ul>
<section data-footnotes="" class="footnotes"><h2 id="footnote-label" class="sr-only">Footnotes</h2>
<ol>
<li id="user-content-fn-1">
<p>Big note. <a href="#user-content-fnref-1" data-footnote-backref="" class="data-footnote-backref" aria-label="Back to content"></a></p>
</li>
</ol>
</section>

API

This package exports the identifiers gfm and gfmHtml. There is no default export.

The separate extensions support the development condition. Run node --conditions development module.js to get instrumented dev code. Without this condition, production code is loaded.

gfm(options?)

Create an extension for micromark to enable GFM syntax.

Parameters
Returns

Extension for micromark that can be passed in extensions to enable GFM syntax (Extension).

gfmHtml(options?)

Create an extension for micromark to support GFM when serializing to HTML.

Parameters
Returns

Extension for micromark that can be passed in htmlExtensions to support GFM when serializing to HTML (HtmlExtension).

Options

Configuration for syntax (TypeScript type).

Type
export type {Options} from 'micromark-extension-gfm-strikethrough'

See Options.

HtmlOptions

Configuration for HTML (TypeScript type).

Type
export type {HtmlOptions} from 'micromark-extension-gfm-footnote'

See HtmlOptions.

Bugs

For bugs present in GFM but not here, or other peculiarities that are supported, see each corresponding readme:

Authoring

For recommendations on how to author GFM, see each corresponding readme:

HTML

For info on what HTML features GFM relates to, see each corresponding readme:

CSS

For info on how GitHub styles these features, see each corresponding readme:

Syntax

For info on the syntax of these features, see each corresponding readme:

Types

This package is fully typed with TypeScript. It exports the additional types HtmlOptions and Options.

Compatibility

Projects maintained by the unified collective are compatible with maintained versions of Node.js.

When we cut a new major release, we drop support for unmaintained versions of Node. This means we try to keep the current release line, micromark-extension-gfm@^3, compatible with Node.js 16.

This package works with micromark version 3 and later.

Security

This package is safe. Setting clobberPrefix = '' is dangerous, it opens you up to DOM clobbering. The labelTagName and labelAttributes options are unsafe when used with user content, they allow defining arbitrary HTML.

Contribute

See contributing.md in micromark/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Titus Wormer

micromark-extension-gfm's People

Contributors

remcohaszing avatar wooorm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

micromark-extension-gfm's Issues

Support for visual color helper when a HEX/RGB color code is written

Initial checklist

Problem

In GitHub issues, when you write a color code like #ff9145, it adds a small span with the color set as background-color

GitHub issues screenshot:
image

But I checked the generated markup and has a simple <code> tag without any visual color helper.

Solution

Can we have this feature? If yes, I am not sure about how to proceed with a contribution. Will it be a new extension like micromark-extension-gfm-color?

Alternatives

One could manually add a span with the same background color as written in the code block, but it won't be an ideal solution.

Options to turn-off all or some autolinking features

Initial checklist

Problem

We would like to turn off all or some autolinking features, e.g. we love the url links but we dont need or desire the email autolinking.

Solution

It would be great if this would be possibile e.g. via options:

autolinking: "all"|"url"|"email"|"none"

Alternatives

don't really know, maybe writing the links in a way the plugin doesnt recognise it?

Autolinks get detected in raw HTML, leading to invalid markup

Initial checklist

Affected packages and versions

[email protected]

Link to runnable example

#4

Steps to reproduce

See https://github.com/micromark/micromark-extension-gfm-autolink-literal

Expected behavior

Autolinks within existing HTML a tags should not create another link, but be left alone.

Actual behavior

A link is created within the link.

Runtime

Node v16

Package manager

npm v6

OS

macOS

Build and bundle tools

No response

Should GitHub emoji be supported and converted to the appropriate Unicode character? :shipit:

Initial checklist

Problem

While "EMOJICODE" is not covered by the GFM specification, it is specifically mentioned in their documentation: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#using-emoji.

Might it be reasonable to assume the the micromark GFM extension would include support for this syntax? Today, it seems the :emoji: is rendered to HTML as-is.

Solution

Convert :tada: to 🎉.

Alternatives

If a little competitive spirit is helpful, note that the markdown-it library has a plugin to do this: https://github.com/markdown-it/markdown-it-emoji.

Options to allow the html tag which disabled by `micromark-extension-gfm-tagfilter` package

Initial checklist

Problem

The micromark-extension-gfm-tagfilter package filter the iframe tag which I really need.

Use case: after copying iframe embedded code from youtube, I will paste it in my editor. Before pasting, I will use micromark to handle the plaintext in the clipboard, so I can convert markdown into html string and also keep the raw html string. Then I will convert the html string into html document object and then submit them into the editor to parse it.

Solution

Refactor the excape rules of micromark-extension-gfm-tagfilter package, then offer an option keepTags to prevert filtered them.

// eg
gfmHtml({
  keepTags: 'iframe,style'
})

Alternatives

Offer options to disable micromark-extension-gfm-tagfilter package in micromark-extension-gfm. Then user can write their own tagfilter extension and also use the other gfm packages with import them separately.

Filter <form> tag

Subject of the feature

Escape <form> tag

Problem

It does not escape <form> tag so it is able to send POST requests by using something like <button type='submit'>Button</button> inside the form tag

Expected behavior

Form tag should not work just like github

Alternatives

It should ignore form tag

Poor performance with large amounts of text

Initial checklist

Affected packages and versions

[email protected]

Link to runnable example

https://github.com/charliematters/gfm-speed-bug

Steps to reproduce

We noticed a slow-down when trying to render large amounts of plain text as Markdown when using the GFM tables plugin. I've written a simple reproduction which should show the differences between performance with the plugin both enabled and disabled. I ran it using node 18 and npm 8.

The input text is the bee movie script (as it's large and contains no complicated syntax), and on my M1 MacBook Pro, adding the plugin takes the time from 30ms to 10,000ms.

This is obviously more noticeable on the end-users computers where we're seeing times in excess of 90s to render mostly plain-text markdown content.

I don't want to disable the plugin, but if there is an obvious fix for this then that would be great!

Expected behavior

Rendering (parsing?) tables shouldn't add a noticeable overhead to execution time

Actual behavior

Rendering time increases greatly when using the micromark-extension-gfm-table plugin

Runtime

Other (please specify in steps to reproduce)

Package manager

Other (please specify in steps to reproduce)

OS

macOS

Build and bundle tools

Other (please specify in steps to reproduce)

Add support for GitLab flavored markdown

Subject of the feature

GitLab uses their own flavor of markdown. They call if GitLab Flavored Markdown (GFM). This is basically an extension of GitHub Flavored Markdown (also called GFM).

In addition to the linked specification, they markdown also supports quick actions inside their markdown in some contexts.

Problem

These special syntaxes are not recognized. This causes tooling such as remark-lint and Prettier to not work properly for them.

Expected behavior

All syntaxes, special GitLab references, and slash commands can be recognized.

Alternatives

Avoid using GitLab specific syntax. However, it would be nice if GitLab issue templates can be formatted, linted, and spell checked.

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.