remark-svgbob

!npm
!NPM Downloads
!License

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:

``bash
npm install remark-svgbob
`

Usage

Import it and use it with Remark as follows:

`js
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));
});
`

Styling for the SVG has been moved to an external css file so that it can easly be modified to meet
your requirements. The vanilla css is included in src/svgbob.css. You will need to include this
stylesheet in your project, otherwise you will be presented with a black box instead of your SVG.

The benifit of doing this is if for example you have a dark mode setting on your site, with the
foreground color being set by a css var, you can easily style the SVG to respond to the forground
var.


Then write markdown

``markdown
Use a code block with the language svgbob

`svgbob
.---.
/-o-/--
.-/ / /->
( * \/
'-. \
\ /
'
`
``

This will generate the following content:

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`.