1.1.1 • Published 1 month ago
remark-svgbob v1.1.1
remark-svgbob
remark-svgbob
is a plugin for Remark, a Markdown processor
powered by plugins part of the unified collective, that converts ASCII diagrams within code blocks
into crisp SVG images using the svgbob
tool.
This allows you to seamlessly integrate ASCII art diagrams into your Markdown files and have them rendered as high-quality SVG images in the resulting HTML.
Features
remark-svgbob
detects code blocks tagged with a specific language identifier (e.g.,svgbob
) in your Markdown and replaces them with corresponding SVG images.- SVG output is scalable and styleable with CSS, making it perfect for responsive designs.
Installation
Install remark-svgbob
with npm:
npm install remark-svgbob
Usage
Import it and use it with Remark as follows:
import remark from "remark";
import remarkSVGBob from "remark-svgbob";
remark()
.use(remarkSVGBob)
.process(markdown, function (err, file) {
if (err) throw err;
console.log(String(file));
});
Then write markdown
Use a code block with the language `svgbob`
```svgbob
.---.
/-o-/--
.-/ / /->
( * \/
'-. \
\ /
'
```
This will generate the following content:
<style>
line, path, circle, rect, polygon{stroke:black;stroke-width:2;stroke-opacity:1;fill-opacity:1;stroke-linecap:round;stroke-linejoin:miter;}text{font-family:Iosevka Fixed, monospace;font-size:14px;}rect.backdrop{stroke:none;fill:transparent;}.broken{stroke-dasharray:8;}.filled{fill:black;}.bg_filled{fill:transparent;}.nofill{fill:transparent;}.end_marked_arrow{marker-end:url(#arrow);}.start_marked_arrow{marker-start:url(#arrow);}.end_marked_diamond{marker-end:url(#diamond);}.start_marked_diamond{marker-start:url(#diamond);}.end_marked_circle{marker-end:url(#circle);}.start_marked_circle{marker-start:url(#circle);}.end_marked_open_circle{marker-end:url(#open_circle);}.start_marked_open_circle{marker-start:url(#open_circle);}.end_marked_big_open_circle{marker-end:url(#big_open_circle);}.start_marked_big_open_circle{marker-start:url(#big_open_circle);}
<!--separator-->
</style>
<defs>
<marker id="arrow" viewBox="-2 -2 8 8" refX="4" refY="2" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<polygon points="0,0 0,4 4,2 0,0"></polygon>
</marker>
<marker id="diamond" viewBox="-2 -2 8 8" refX="4" refY="2" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<polygon points="0,2 2,0 4,2 2,4 0,2"></polygon>
</marker>
<marker id="circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<circle cx="4" cy="4" r="2" class="filled"></circle>
</marker>
<marker id="open_circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<circle cx="4" cy="4" r="2" class="bg_filled"></circle>
</marker>
<marker id="big_open_circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<circle cx="4" cy="4" r="3" class="bg_filled"></circle>
</marker>
</defs>
<rect class="backdrop" x="0" y="0" width="136" height="112"></rect>
<circle cx="68" cy="24" r="3" class="nofill"></circle>
<line x1="66" y1="28" x2="56" y2="48" class="solid"></line>
<line x1="72" y1="24" x2="104" y2="24" class="solid"></line>
<circle cx="36" cy="56" r="3" class="filled"></circle>
<line x1="64" y1="48" x2="56" y2="64" class="solid"></line>
<text x="42" y="76" >.</text>
<line x1="128" y1="64" x2="120" y2="80" class="solid"></line>
<text x="58" y="92" >'</text>
<g>
<path d="M 64,8 A 8,8 0,0,0 58,12" class="nofill"></path>
<line x1="58" y1="12" x2="38" y2="52" class="solid"></line>
<line x1="64" y1="8" x2="88" y2="8" class="solid"></line>
<path d="M 88,8 A 3,3 0,0,1 90,12" class="nofill"></path>
<line x1="90" y1="12" x2="72" y2="48" class="solid"></line>
<line x1="52" y1="24" x2="64" y2="24" class="solid"></line>
<line x1="76" y1="40" x2="88" y2="40" class="solid"></line>
<polygon points="88,36 96,40 88,44" class="filled"></polygon>
<path d="M 32,40 A 8,8 0,0,0 26,44" class="nofill"></path>
<line x1="26" y1="44" x2="24" y2="48" class="solid"></line>
<line x1="32" y1="40" x2="44" y2="40" class="solid"></line>
<path d="M 24,48 A 16,16 0,0,0 24,64" class="nofill"></path>
<line x1="24" y1="64" x2="26" y2="68" class="solid"></line>
<path d="M 26,68 A 8,8 0,0,0 32,72" class="nofill"></path>
<line x1="32" y1="72" x2="40" y2="72" class="solid"></line>
</g>
</details>
## Contributing
Contributions are always welcome! Feel free to fork the repository, make changes, and submit a pull
request.
## License
Distributed under the MIT License. See `LICENSE` file for more information.
---
Note: The `remark-svgbob` plugin is not officially associated with `svgbob`.