[PE-200] Implements rendering for legal policy #140
Conversation
markedAuthor: Christopher Jeffrey Description: A markdown parser built for speed Homepage: https://marked.js.org
|
| Created | about 1 year ago |
| Last Updated | 20 days ago |
| License | MIT |
| Maintainers | 2 |
| Releases | 4 |
| Direct Dependencies | @types/mdast, mdast-util-gfm, micromark-extension-gfm and unified |
| Keywords | unified, remark, remark-plugin, plugin, mdast, markdown, table, strikethrough, tasklist, autolink, footnote, github and gfm |
rehype-raw
Author: Titus Wormer
Description: rehype plugin to reparse the tree (and raw nodes)
Homepage: https://github.com/rehypejs/rehype-raw#readme
| Created | about 5 years ago |
| Last Updated | 3 months ago |
| License | MIT |
| Maintainers | 2 |
| Releases | 10 |
| Direct Dependencies | @types/hast, hast-util-raw and unified |
| Keywords | unified, rehype, rehype-plugin, plugin, raw and html |
README
rehype-raw
rehype plugin to parse the tree again (and raw nodes).
Keeping positional info OK. 🙌
Tiny wrapper around hast-util-raw
Install
This package is ESM only:
Node 12+ is needed to use it and it must be imported instead of required.
npm:
npm install rehype-rawUse
Say we have the following Markdown file, example.md:
<div class="note">
A mix of *Markdown* and <em>HTML</em>.
</div>And our script, example.js, looks as follows:
import {readSync} from 'to-vfile'
import {reporter} from 'vfile-reporter'
import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeRaw from 'rehype-raw'
import rehypeDocument from 'rehype-document'
import rehypeFormat from 'rehype-format'
import rehypeStringify from 'rehype-stringify'
const file = readSync('example.md')
unified()
.use(remarkParse)
.use(remarkRehype, {allowDangerousHtml: true})
.use(rehypeRaw)
.use(rehypeDocument, {title: '🙌'})
.use(rehypeFormat)
.use(rehypeStringify)
.process(file)
.then((file) => {
console.error(reporter(file))
console.log(String(file))
})Now, running node example yields:
example.md: no issues found
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>🙌</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="note">
<p>A mix of <em>Markdown</em> and <em>HTML</em>.</p>
</div>
</body>
</html>API
This package exports no identifiers.
The default export is rehypeRaw.
unified().use(rehypeRaw[, options])
Parse the tree again, also parsing “raw” nodes (as exposed by
remark-rehype).
options are passed to hast-util-raw.
Note
This project parses a hast tree with embedded raw HTML.
This typically occurs because we’re coming from Markdown, often parsed by
remark-parse.
Inside Markdown, HTML is a black box: Markdown doesn’t know what’s inside that
HTML.
So, when rehype-raw maps Markdown to HTML, it cannot understand raw embedded
HTML.
That’s where this project comes in.
But, Markdown is much terser than HTML, so it’s often preferred to use Markdown,
in HTML, inside Markdown.
As can be seen in the above example.
However, Markdown can only be mixed with HTML in some cases.
Take the following examples:
-
Warning: does not work:
<div class="note"> A mix of *Markdown* and <em>HTML</em>. </div>
…this is seen as one big block of HTML:
<div class="note"> A mix of *Markdown* and <em>HTML</em>. <div>
-
This does work:
<div class="note"> A mix of *Markdown* and <em>HTML</em>. </div>
…it’s one block with the opening HTML tag, then a paragraph of Markdown, and
another block with closing HTML tag.
That’s because of the blank lines:<div class="note"> A mix of <em>Markdown</em> and <em>HTML</em>. <div>
-
This also works:
<span class="note">A mix of *Markdown* and <em>HTML</em>.</span>
…Inline tags are parsed as separate tags, with Markdown in between:
<p><span class="note">A mix of <em>Markdown</em> and <em>HTML</em>.</span></p>
This occurs if the tag name is not included in the list of block tag
names.
Security
Improper use of rehype-raw can open you up to a
cross-site scripting (XSS) attack.
Either do not combine this plugin with user content or use
rehype-sanitize.
Contribute
See contributing.md in rehypejs/.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
react-markdown
Author: Espen Hovlandsdal
Description: Render Markdown as React components
Homepage: https://github.com/remarkjs/react-markdown#readme
| Created | over 6 years ago |
| Last Updated | about 1 month ago |
| License | MIT |
| Maintainers | 2 |
| Releases | 80 |
| Direct Dependencies | @types/hast, @types/unist, comma-separated-tokens, hast-util-whitespace, prop-types, property-information, react-is, remark-parse, remark-rehype, space-separated-tokens, style-to-object, unified, unist-util-visit and vfile |
| Keywords | remark, unified, markdown, commonmark, gfm, ast, react, react-component and component |
mdast-util-definitions
Author: Titus Wormer
Description: mdast utility to find definition nodes in a tree
Homepage: https://github.com/syntax-tree/mdast-util-definitions#readme
| Created | over 6 years ago |
| Last Updated | 4 months ago |
| License | MIT |
| Maintainers | 2 |
| Releases | 17 |
| Direct Dependencies | @types/mdast, @types/unist and unist-util-visit |
| Keywords | unist, mdast, mdast-util, util, utility, markdown, tree, node, definition, find and cache |
README
mdast-util-definitions
mdast utility to get definitions by identifier.
Supports funky keys, like __proto__ or toString.
Install
This package is ESM only:
Node 12+ is needed to use it and it must be imported instead of required.
npm:
npm install mdast-util-definitionsUse
import {remark} from 'remark'
import {definitions} from 'mdast-util-definitions'
const tree = remark().parse('[example]: https://example.com "Example"')
const definition = definitions(tree)
definition('example')
// => {type: 'definition', 'title': 'Example', …}
definition('foo')
// => nullAPI
This package exports the following identifiers: definitions.
There is no default export.
definitions(tree)
Create a cache of all definitions in tree.
Uses CommonMark precedence: prefers the first definitions for duplicate
definitions.
Returns
definition(identifier)
Parameters
identifier(string) — Identifier of definition.
Returns
Node? — Definition, if found.
Security
Use of mdast-util-definitions does not involve hast or user
content so there are no openings for cross-site scripting (XSS) attacks.
Additionally, safe guards are in place to protect against prototype poisoning.
Related
unist-util-index
— index property values or computed keys to nodes
Contribute
See contributing.md in syntax-tree/.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
New dependencies added: mdast-util-definitions, react-markdown, rehype-raw, remark-gfm and marked.
Example of PR titles that include pivotal stories:
- single story:
[#123456] my PR title - multiple stories:
[#123456,#123457,#123458] my PR title
|
Close as no more needed |
This PR implements the rendering for markdown file containing policy's text