How to Write Tables in Markdown

Basic table creation with Markdown

Table notation in Markdown Basically all you do is separate things with | Basic form Copy |Header 1|Header 2|Header 3| |-------|-------|-------| |Item 1|Item 2|Item 3| Header 1 Header 2 Header 3 Item 1 Item 2 Item 3 The first row is the header The header always seems to end up bold The second row is the separator that sets the attributes Any number of - seems to be fine, but four or more is probably better From the third row onwards, you just keep adding as many items and contents as you like Alignment When you want the headers and items left aligned, right aligned or centred [Read More]

Rendering Math Formulas in Markdown with MathJax and KaTeX

Displaying math formulas in Markdown

Depending on the theme, math rendering may already work out of the box, but if the formulas do not show up, add the following to layout/partial/footer.html inside the theme Copy <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]} }); </script> <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script> KaTeX can be used to generate complex math formulas server-side. $$ \phi = \frac{(1+\sqrt{5})}{2} = 1.6180339887\cdots $$ Additional details can be found on GitHub or on the Wiki . [Read More]

Markdown Sample

Sample MarkDown formatting

Advertisement :) pica - high quality and fast image resize in browser. babelfish - developer friendly i18n with plurals support and easy syntax. You will like those projects! h1 Heading 8-) h2 Heading h3 Heading h4 Heading h5 Heading h6 Heading Horizontal Rules Typographic replacements Enable typographer option to see result. (c) (C) (r) (R) (tm) (TM) (p) (P) +- test.. test… test….. test?….. test!…. !!!!!! ???? ,, – — [Read More]

Mermaid Diagram Samples in Hugo

Creating sequence diagrams in Markdown

In Beautifulhugo, the Hugo theme, mermaid.js, the library for drawing sequence diagrams, is already built in, so simply specifying the short tag and writing in the mermaid format is enough to display a sequence diagram. If it is not built into your theme, it is a good idea to refer to the article Hugoにmermaidを組み込んでみた (in Japanese). A simple sample graph LR A[Local] -->|git push| B(GitLab.com) B --> C{Netlify} Gantt chart Quoted from the official site gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d [Read More]

Big Image Sample

Using Multiple Images

The image banners at the top of the page are refered to as “bigimg” in this theme. They are optional, and one more more can be specified. If more than one is specified, the images rotate every 10 seconds. In the front matter, bigimgs are specified using an array of hashes. [Read More]

Test markdown

Each post also has a subtitle

You can write regular markdown here and Jekyll will automatically convert it to a nice webpage. I strongly encourage you to take 5 minutes to learn how to write in markdown - it’ll teach you how to transform regular text into bold/italics/headings/tables/etc. Here is some bold text Here is a secondary heading Here’s a useless table: Number Next number Previous number Five Six Four Ten Eleven Nine Seven Eight Six Two Three One How about a yummy crepe? [Read More]