diff --git a/readme.md b/readme.md index bd358a7..c5bac32 100644 --- a/readme.md +++ b/readme.md @@ -38,8 +38,6 @@ one syntax for arbitrary extensions in markdown. You can use this with some more code to match your specific needs, to allow for anything from callouts, citations, styled blocks, forms, embeds, spoilers, etc. -## When should I use this? - unified is an AST (abstract syntax tree) based transform project. **remark** is everything unified that relates to markdown. The layer under remark is called mdast, which is only concerned with syntax @@ -47,6 +45,8 @@ trees. Another layer underneath is micromark, which is only concerned with parsing. This package is a small wrapper to integrate all of these. +## When should I use this? + Directives are one of the four ways to extend markdown: an arbitrary extension syntax (see [Extending markdown](https://github.com/micromark/micromark#extending-markdown) in micromark’s docs for the alternatives and more info). @@ -177,16 +177,7 @@ that. This example shows how directives can be used for YouTube embeds. It’s based on the example in Use above. - -If `example.md` is: - -```md -# Cat videos - -::youtube[Video of a cat in a box]{#01ab2cd3efg} -``` - -Then, replacing `myRemarkPlugin` with this function: +If `myRemarkPlugin` was replaced with this function: ```js // This plugin is an example to turn `::youtube` into iframes. @@ -210,11 +201,11 @@ function myRemarkPlugin() { data.hName = 'iframe' data.hProperties = { - src: 'https://www.youtube.com/embed/' + id + '?feature=oembed', + src: 'https://www.youtube.com/embed/' + id, width: 200, height: 200, frameBorder: 0, - allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture', + allow: 'picture-in-picture', allowFullScreen: true } } @@ -223,11 +214,19 @@ function myRemarkPlugin() { } ``` -Now, running `node example` yields: +…and `example.md` contains: + +```markdown +# Cat videos + +::youtube[Video of a cat in a box]{#01ab2cd3efg} +``` + +…then running `node example` yields: ```html