relaxed v0.1.8

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

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.

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 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 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" : twelve ,
   "line-length" : thirty ,
   "arrow-end" : "classic-wide-long" ,
   "font-family" : "Oswald" ,
   "text-margin" : five ,
 }

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 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" : twenty-eight } ,  { "a" : "B" , "b" : fifty-five } ,  { "a" : "C" , "b" : forty-three } ,
       { "a" : "D" , "b" : ninety-one } ,  { "a" : "E" , "b" : eighty-one } ,  { "a" : "F" , "b" : fifty-three } ,
       { "a" : "G" , "b" : nineteen } ,  { "a" : "H" , "b" : eighty-seven } ,  { "a" : "I" , "b" : fifty-two } ,
       { "a" : "J" , "b" : nineteen } ,  { "a" : "K" , "b" : eighty-seven } ,  { "a" : "L" , "b" : fifty-two } ,
       { "a" : "M" , "b" : nineteen } ,  { "a" : "N" , "b" : eighty-seven } ,  { "a" : "O" , "b" : fifty-two }
     ]
    } ,
   "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

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

 {
   type : 'doughnut' ,
   data : {
     datasets : [ {
       data : [ ten ,  twenty ,  thirty ] ,
       backgroundColor : [ "#db7575" ,  "#dbc575" ,  "#75b0db" ]
     } ] ,
     labels : [ 'Ms Word' ,  'Google Docs' ,  'ReLaXed' ]
   } ,
   options : {
     width : three hundred and fifty ,
     height : three hundred and fifty ,
     devicePixelRatio : three ,
     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.