gatsby-remark-color-of-code v0.0.1

gatsby-remark-color-of-code

various code renderers integrated for gatsby

At the moment the plugins are rather specialized for my needs inside website.

Ideally there will be two plugin parts:

• client side generation (browser renders the pictures from a textual description)
• server side generation (the pictures are rendered in advance, the browser just displays the result)

Analysis of other available projects

Similar Remark plugins

• https://github.com/rhanekom/gatsby-remark-draw
• https://github.com/konsumer/gatsby-remark-graph
• https://github.com/hanai/gatsby-remark-mathjax

Interesting links

• https://blog.nteract.io/designing-the-nteract-data-explorer-f4476d53f897
• https://emeeks.github.io/semiotic/#/semiotic/

Rendering

Slides

• https://revealjs.com/#/

svg

• https://d3js.org/
• http://dmitrybaranovskiy.github.io/raphael/
• https://animejs.com/
• http://snapsvg.io/demos/#game
• https://svgjs.com/
• https://maxwellito.github.io/vivus/
• https://two.js.org/examples/

HTML5 canvas

• http://fabricjs.com/
• https://two.js.org/examples/
• http://paperjs.org/about/

WebGL

• https://two.js.org/examples/
• https://twgljs.org/
• https://threejs.org/
• https://pixijs.io/examples/
• http://stack.gl/

Graphs

Graphviz

• https://github.com/mdaines/viz.js
• https://github.com/klorenz/graphviz2svg
• https://www.npmjs.com/package/d3-graphviz
• https://github.com/rhanekom/skyrta

Dagre

• https://github.com/dagrejs

MxGraph

• https://github.com/jgraph/mxgraph

Cytoscape

• http://js.cytoscape.org/

UML

PlantUML

• https://www.npmjs.com/package/node-plantuml-latest

MxGraph

• https://github.com/jgraph/mxgraph

Math

MathJAX

• https://www.npmjs.com/package/mathjax-node
• https://github.com/hanai/gatsby-remark-mathjax (just wraps a div)
• https://www.npmjs.com/package/@nteract/mathjax

FlowCharts

Mermaid

• https://github.com/rhanekom/skyrta

FlowChart.js

• https://flowchart.js.org/
• https://github.com/adrai/flowchart.js/

BPMN.IO

• https://bpmn.io/

BPMN

DMN

CMMN