---
pinned: true
title: "Getting started"
description: "How to write articles on this blog from an easy-to-use and rich syntax?"
authors: [ "glegoux" ]
time_reading_minutes: 10
category: "Methodology"
tags: [ "Markdown", "Liquid Template", "Kramdown Converter", "Jekyll" ]
---
Discover the **extended Markdown syntax** used on this tech blog, generated from the template [๐งช Jekyll Tech blog](https://github.com/glegoux/jekyll-tech-blog), to write articles or to generate static web pages. It is based on [Kramdown syntax](https://kramdown.gettalong.org/syntax.html) with [GFM parser](https://kramdown.gettalong.org/parser/gfm.html) and a light
custom extension for rendering. Besides, this article is written with this syntax. At the top of the web page, click on
Source to explore its source code and on Table of contents to browse
the supported features. So, you can mix this syntax with **existing macro** and **native HTML syntaxes** to write any content. As this blog is **highly configurable**, you can **build** your **custom macros**. Each article
also has **metadata** to inject constants of configurations.
Read the documentation of the [Kramdown syntax](https://kramdown.gettalong.org/syntax.html).
All contents, even if unavailable with the extended Markdown syntax, can be shown thanks to embedded native content: HTML, JS, CSS, or macros: `includes` and `tags` of the [Liquid template](https://shopify.github.io/liquid).
Summary of supported features by the extended Markdown syntax
Feature name
Comment
Extended Markdown syntax
Existing Macro syntax
Native HTML syntax
Structure
Heading
Organize your content with part, subpart, sub-subpart, etc.
โ
โ
โ
New line & Paragraph
Organize the content in a part
โ
โ
โ
Horizontal Rule
Break between paragraph-level elements
โ
โ
โ
Note
Soon refactored! Add your notes: info, question, warning, error, success, etc.
โ
โ
โ
Textual Content
Enchanced Text
Enhance your text: italics, bold, strikethrough, inline code, highlight, superscript, subscript, etc.
โ
โ
โ
Link
Use absolute and relative links named or not and re-usable
โ
โ
โ
Emoticon
Use emoticons with shortcode or unicode
โ
โ
โ
List
Build an ordered, unordered, definition or task lists and sublists
โ
โ
โ
Table
Arrange the content in rows and columns with an optional header.
โ
โ
โ
Blockquote
Format a special sentence of paragraph to draw attention to the reader
โ
โ
โ
Quote
Soon refactored! Quote your authors
โ
โ
โ
Footnote
Put extra information at the bottom of the article referencing inside content
โ
โ
โ
Abbreviation
Shorten used word or concept by keeping the accessible meaning
โ
โ
โ
Illustration Content
Image
Soon documented!
โ
โ
โ
Video
Soon documented!
โ
โ
โ
Presentation
Soon documented!
โ
โ
โ
Diagram
Soon documented!
โ
โ
โ
Informatics Code
Programming Language
Highlight code: python, java, scala, rust, c#, c++, c, bash, ruby, go, typescript, javascript, html, css ...
โ
โ
โ
Terminal
Highlight content in a terminal
โ
โ
โ
Text File
Highlight text content: plain, json, yaml, xml, ini ...
โ
โ
โ
Mathematics Equation
In-Line Equation
Use LateX syntax for in-line equation
โ
โ
โ
Single-Line Equation
Use LateX syntax for single-line equation
โ
โ
โ
Multi-lines Equation
Use LateX syntax for multi-lines equation
โ
โ
โ
Special Content
HTML
Put native HTML when the Markdown syntax is not available, it can contain Markdown in its markups
โ
โ
โ
Comment
Comment content
โ
โ
โ
Escape
Escape meta or special characters
โ
โ
โ
Others
Create your macros, extend the project or the tools everything is open-source
โ
โ
โ
~~~ python print("Hello world!") ~~~~~~ r print("Hello World!", quote = FALSE) ~~~ Source code:
~~~ r print("Hello World!", quote = FALSE) ~~~~~~ m disp('Hello World!') ~~~ Source code:
~~~ m disp('Hello World!') ~~~~~~ java System.out.println("Hello world!"); ~~~ Source code:
~~~ java System.out.println("Hello world!"); ~~~~~~ kotlin println("Hello world!") ~~~ Source code:
~~~ kotlin println("Hello world!") ~~~~~~ scala println("Hello world!") ~~~ Source code:
~~~ scala println("Hello world!") ~~~~~~ csharp Console.WriteLine("Hello world!"); ~~~ Source code:
~~~ csharp Console.WriteLine("Hello world!"); ~~~~~~ dart print("Hello World!"); ~~~ Source code:
~~~ dart print("Hello World!"); ~~~~~~ swift print("Hello World!") ~~~ Source code:
~~~ swift print("Hello World!") ~~~~~~ rust println!("Hello World!"); ~~~ Source code:
~~~ rust println!("Hello World!"); ~~~~~~ c++ std::cout << "Hello World!"; ~~~ Source code:
~~~ c++ std::cout << "Hello World!"; ~~~~~~ c printf("Hello, World!"); ~~~ Source code:
~~~ c printf("Hello, World!"); ~~~~~~ bash echo "Hello world!" ~~~ Source code:
~~~ bash echo "Hello world!" ~~~~~~ ruby puts "Hello world!" ~~~ Source code:
~~~ ruby puts "Hello world!" ~~~~~~ go import("fmt") fmt.Println("Hello world!") ~~~ Source code:
~~~ go import("fmt") fmt.Println("Hello world!") ~~~~~~ php print "Hello world!"; ~~~ Source code:
~~~ php print "Hello world!"; ~~~~~~ perl print "Hello world!"; ~~~ Source code:
~~~ perl print "Hello world!"; ~~~~~~ typescript console.log("Hello world!"); ~~~ Source code:
~~~ typescript console.log("Hello world!"); ~~~~~~ javascript console.log("Hello world!"); ~~~ Source code:
~~~ javascript console.log("Hello world!"); ~~~~~~ sql CREATE TABLE helloworld; ~~~ Source code:
~~~ sql CREATE TABLE helloworld; ~~~~~~ html
Hello world!
~~~ Source code:~~~ html <p>Hello world</p> ~~~~~~ css .hello .world { text-align: center } ~~~ Source code:
~~~ css .hello .world { text-align: center } ~~~~~~ sass .hello { .world { text-align: center } } ~~~ Source code:
~~~ sass .hello { .world { text-align: center } } ~~~## Terminal Have a dark terminal container: ~~~ terminal $ command result ~~~ Source code:
~~~ terminal $ command result ~~~## Text File Highlight your text file content: plain, json, yaml, xml, ini etc. ~~~ "Hello World!" ~~~ Source code:
~~~ "Hello World!" ~~~~~~ json {"message": "Hello World!"} ~~~ Source code:
~~~ json {"message": "Hello World!"} ~~~~~~ yaml hello: world: "Hello World!" ~~~ Source code:
~~~ yaml hello: world: "Hello World!" ~~~~~~ xml
~~~ xml <?xml version="1.0" encoding="UTF-8"?> <message>Hello World!</message> ~~~~~~ ini [message] message="Hello World!" ~~~ Source code:
~~~ ini [message] message="Hello World!" ~~~# Mathematics Equation Use LateX syntax, see [latex-project.org](https://www.latex-project.org).
`inline or single line`
But you cannot display `
inside a section delimited by `
.
**Multi-lines Characters**
* <code>inline or single line</code>
If you have to display reserved characters such as `<`, and `>` within the `` section, the characters must be escaped using their respective HTML entity:
`<: <`, and `>: >`. But you cannot escape `&`.
* multi-lines
If you have to display reserved characters such as `<`,`>`, `&`, and `"` within the `` section, the characters must be escaped using their respective HTML entity:
`<: <`, `>: >`, `&: &`, and `": "`.
* ~~~ multi-lines ~~~
But you cannot to display reserved sequence of characters `~~~` within a section delimited by `~~~`.
* ``` multi-lines ```
But you cannot to display reserved sequence of characters ```
within a section delimited by ```
.
## Others
TODO