https://github.com/kdheepak/remark-svgbob

Convert markdown codeblock with ascii diagram to svg using svgbob wasm
https://github.com/kdheepak/remark-svgbob

Last synced: about 1 month ago
JSON representation

Convert markdown codeblock with ascii diagram to svg using svgbob wasm

• Host: GitHub
• URL: https://github.com/kdheepak/remark-svgbob
• Owner: kdheepak
• License: mit
• Created: 2024-03-10T17:55:08.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-03-22T04:32:40.000Z (10 months ago)
• Last Synced: 2024-10-15T16:51:42.243Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 525 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# remark-svgbob

![npm](https://img.shields.io/npm/v/remark-svgbob)

![NPM Downloads](https://img.shields.io/npm/dm/remark-svgbob)

![License](https://img.shields.io/npm/l/remark-svgbob)

[![Code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

`remark-svgbob` is a plugin for [Remark](https://github.com/remarkjs/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`](https://github.com/ivanceras/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));

  });

```

Then write markdown 

````markdown

Use a code block with the language `svgbob`

```svgbob

       .---.

      /-o-/--

   .-/ / /->

  ( *  \/

   '-.  \

      \ /

       '

```

````

This will generate the following content:

  

```markdown

Use a code block with the language `svgbob`



    

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

    

    

        

            

        

        

            

        

        

            

        

        

            

        

        

            

        

    

    

    

    

    

    

    

    .

    

    '

    

        

        

        

        

        

        

        

        

        

        

        

        

        

        

        

    



```

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