Skip to content

Special file renderings

Jump to bottom
Zulko edited this page Nov 4, 2018 · 2 revisions

relaxed v0.1.8

Special renderings

Markdown

ReLaXed bundles markdown-it so you can include markdown text in your Pug documents as follows:

p
  :markdown-it
    This is a markdown paragraph.
    This is a [link](https://en.wikipedia.org)

    - This is a markdown bullet point.

You can also write markdown in a separate file and include it in your Pug document as follows:

include:markdown-it my_source.md

Equations

This requires to activate the mathjax module, i.e. to have config.yml file at your project root with content:

plugins:
  - mathjax

This will automatically convert into a nice-looking equation any LaTeX formula on your page flanked by $$, such as:

$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

It is also possible to write inline equations (e.g. inside a title or a paragraph) delimited by \\( \\). For instance We have \\( a \ne 0 \\) translates into a nicely formatted "We have a ≠ 0"

Note that MathJax can significantly increase rendering times for large documents.

CSV tables

Place a CSV file mydata.table.csv in your project directory, with the extension either .table.csv (for tables with no header) or htable.csv (with header). Every time this file will be changed, ReLaXed will translate it into mydata.pug, which contains the Pug code for the inner of a HTML table (i.e. tags thead, tbody, tr, th, but not the encompassing table tag).

You can then modify mydata.pug but keep in mind that it will be overwritten every time mydata.table.csv is modified. To insert the table data in your document, use import:

table
  import mydata.pug

In the code above, you can add some classes to the table tag to style your table.

Mermaid flowcharts

Mermaid allows the generation of flowcharts. In the directory of your project create a file with a .mermaid extension, e.g. my_flowchart.mermaid, with the following content

graph LR
  Anna --> Bob
  Bob --> Camelia
  Anna --> Camelia
  Bob -->|by phone| David

Everytime the file my_flowchart.mermaid is modified, the file my_flowchart.svg is re-rendered (which, in turn, triggers the re-rendering of the full PDF document that this chart is part of).

Example of flowchart definition with ReLaXed and Mermaid

Flowchart.js plots

Flowchart is another library that generates less generic but more elegantly straight the generation of flowcharts. In the directory of your project create a file with a .flowchart extension, e.g. my_process.flowchart, with the following extension

st=>start: Start:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation
op2=>operation: Stuff
sub1=>subroutine: My Subroutine
cond=>condition: Yes or No?:>http://www.google.com
c2=>condition: Good idea
io=>inputoutput: catch something...

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

Optionally, this file can be accompanied by a configuration file my_process.flowchart.json containing some rendering parameters (as allowed by the Flowchart.js library):

{
  "font-size": 12,
  "line-length": 30,
  "arrow-end": "classic-wide-long",
  "font-family": "Oswald",
  "text-margin": 5,
}

If all your flowcharts have the same default configuration, you can also place a default file named flowchart.default.json in the same folder as your flowchart definitions.

Example of flowchart definition with ReLaXed and Flowchart.js.

Vegalite plots

Vegalite allows the generation of plots. In the directory of your project create a file with a .vegalite extension, e.g. my_plot.vegalite, with the following content:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.0.json",
  "data": {
    "values": [
      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
      {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
      {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52},
      {"a": "J","b": 19}, {"a": "K","b": 87}, {"a": "L","b": 52},
      {"a": "M","b": 19}, {"a": "N","b": 87}, {"a": "O","b": 52}
    ]
   },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "color": {"value": "#b4588c"}
  }
}

Everytime the file my_plot.vegalite is modified, the file my_plot.svg is re-rendered (which, in turn, triggers the re-rendering of the full PDF document that this chart is part of).

Example of plot definition with ReLaXed and Vegalite

Charts.js plots

Create a file called e.g. doughnut.chart.js with the following Chart.js definition content:

{
  type: 'doughnut',
  data: {
    datasets: [{
      data: [10, 20, 30],
      backgroundColor:["#db7575", "#dbc575", "#75b0db"]
    }],
    labels: ['Ms Word', 'Google Docs', 'ReLaXed']
  },
  options: {
    width:350,
    height:350,
    devicePixelRatio: 3,
    legend: {
      position: 'bottom'
    }
  }
};

Every time this file is changed, the interactive ReLaXed instance will convert it into a doughnut.png image. Note that the devicePixelRatio option is what controls the image resolution. The bigger, the higher resolution your image will be.

Clone this wiki locally