• 15 min Reading
  • 347 Views
  • 1 Sharings
Table of contents

Each article on this blog is written in enhanced markdown with super set of particular blocks:

<pre>@type
content
</pre>

or

~~~ type
content
~~~

You see can see all syntax highlighting on this blog such as text, coding block, math formula, video, presentation and so more ....

Text

Simple Markdown

Use Github markdown https://guides.github.com/features/mastering-markdown/ or nearly.

  • Italics italics or italics or italics
  • Bold bold or bold or bold
  • Underline underline
  • Strikethrough Strikethrough
  • Underline italics underline italics
  • Underline bold underline bold
  • Bold Italics bold italics or bold italics or bold italics
  • Underline Bold Italics underline bold italics

Source code:

* Italics	*italics* or _italics_	or <code>@i italics</code> 
* Bold	**bold**	or __bold__ or <code>@b bold</code>	
* Underline	<code>@u underline</code>	
* Strikethrough	 ~~Strikethrough~~
* Underline italics	<code>@iu underline italics</code>
* Underline bold <code>@bu underline bold</code>
* Bold Italics	**_bold italics_** or __*bold italics*__ or <code>@bi bold italics</code> 
* Underline Bold Italics	<code>@biu underline bold italics</code>

Structures of articles

You can do part , subpart and sub-subpart:

Source code:

# H1
## H2
### H3


H1
======

H2
------

List

  1. item1
  2. item2
  3. item3
  4. item4

Source code:

1. item1
2. item2
3. item3
4. item4

Quote

Talk is cheap. Show me the code.

Linus Torvalds

Source code:

> Talk is cheap. Show me the code.

Linus Torvalds

Emoticon

Use Github emoji, https://www.webpagefx.com/tools/emoji-cheat-sheet/

:smile: :scream: :yum:

Source code:

:smile: :scream: :yum:

Links

Simple link (works with absolute and relative link):

Google

Source code:

[Google](https://www.google.com)

Simple link with title:

Google

Source code:

[Google](https://www.google.com "Google's Homepage")

You can use shortcut for your links to use that several times on article or to centralize links:

Google1 Google2

Source code:

[Google1][1] [Google2][1]

[1]: https://www.google.com

References

It is important to have correct references, each reference with any type (simple, web or book) should have one unique name allowing to identify.
So you can references how many times you want to on of these references by @ref-<name>.
These references are often at the end of article.

For example:
[1]

Source code:

@ref-simple-example-1

Other examples: [2] [3] [4] [5] and [5] again.

Simple

For simple content:

[1] Python on Ubuntu

Source code:

<pre>@ref
name: simple-example-1
content: Python on Ubuntu
</pre>

For simple link:

Source code:

<pre>@ref
name: simple-example-2
link: https://wiki.ubuntu.com/Python
</pre>

For simple content and link:

[3] https://wiki.ubuntu.com/Python Python on Ubuntu

Source code:

<pre>@ref
name: simple-example-3
content: Python on Ubuntu
link: https://wiki.ubuntu.com/Python
</pre>

Web

For web reference:

[4] Barry Warsaw (barry). Python on Ubuntu [online]. Canonical, Ubuntu [publication date 2017-01-25]. Available at https://wiki.ubuntu.com/Python.

Source code:

<pre>@ref-web
name: web-example
author: Barry Warsaw (barry)
title: Python on Ubuntu
editor:	Canonical, Ubuntu
date: 2017-01-25
link: https://wiki.ubuntu.com/Python
</pre>

Book

For book reference:

[5] Trevor Hastie, Robert Tibshirani and Jerome Friedman. The Elements of Statistical Learning: Data Mining, Inference, and Prediction, Second Edition (Springer Series in Statistics) 2nd Edition. Springer [publication date 2016]. 745 pages.ISBN: 0387848576.

Source code:

<pre>@ref-book
name: book-example
author: Trevor Hastie, Robert Tibshirani and Jerome Friedman
title: The Elements of Statistical Learning: Data Mining, Inference, and Prediction, Second Edition (Springer Series in Statistics) 2nd Edition
editor: Springer 
date: 2016
n_pages: 745
ISBN: 0387848576
</pre>

Table

CSV

without header:

csv
123
abc

Source code:

<pre>@csv
1,2,3
a,b,c
</pre>

with header:

csv
col1col2col3
123
abc

Source code:

<pre>@csv-header
col1,col2,col3
1,2,3
a,b,c
</pre>

TSV

without header:

tsv
col1col2col3
123
abc

Source code:

<pre>@tsv
col1	col2	col3
1	2	3
a	b	c
</pre>

with header:

tsv
col1col2col3
123
abc

Source code:

<pre>@tsv-header
col1	col2	col3
1	2	3
a	b	c
</pre>

Table and Matrix

table
123
abc

Source code:

<pre>@table
1,2,3
a,b,c
</pre>

matrix:

matrix
col1col2col3
row1123
row2abc

Source code:

<pre>@matrix
,col1,col2,col3
row1,1,2,3
row2,a,b,c
</pre>

Notes

Info

INFO

Source code:

<pre>@info 
INFO
</pre>

Question

QUESTION

Source code:

<pre>@question 
QUESTION
</pre>

Warning

WARNING

Source code:

<pre>@warning 
WARNING
</pre>

Error

ERROR

Source code:

<pre>@error 
ERROR
</pre>

Programming

Terminal

$ command
result

Source code:

<pre>@terminal
$ command
result
</pre>

Bash

echo "Hello world!"

Source code:

~~~ bash 
echo "Hello world!"
~~~

Ruby

puts "Hello world!"

Source code:

~~~ ruby 
puts "Hello world!"
~~~

Java

System.out.println("Hello world!");

Source code:

~~~ java 
System.out.println("Hello world!");
~~~

Python

print("Hello world!")

Source code:

~~~ python 
print("Hello world!")
~~~

Go

import("fmt")

fmt.Println("Hello world!")

Source code:

~~~ go
import("fmt")

fmt.Println("Hello world!")
~~~

JavaScript

console.log("Hello world!");

Source code:

~~~ javascript
console.log("Hello world!");
~~~

HTML

<p>Hello world!</p>

Source code:

~~~ html
<p>Hello world</p>
~~~

CSS

.hello-world {
  text-align: center
}

Source code:

~~~ css
.hello-world {
  text-align: center
}
~~~

Format text file

Txt

txt
"Hello World!"

Source code:

<pre>@txt
"Hello World!"
</pre>

JSON

{"message": "Hello World!"}

Source code:

~~~ json
{"message": "Hello World!"}
~~~

YAML

hello:
  world: "Hello World!"

Source code:

~~~ yaml
hello:
  world: "Hello World!"
~~~

XML

<?xml version="1.0" encoding="UTF-8"?>
<message>Hello World!</message>

Source code:

~~~ xml

Hello World!
~~~

INI

[message]
message="Hello World!"

Source code:

~~~ ini
[message]
message="Hello World!"
~~~

Maths

Use LateX syntax, see https://www.latex-project.org .

Inline formula

This formula $\int_0^1 x^2dx = \frac{1}{3} $ is inline.

Source code:

<code>@maths \int_0^1 x^2dx = \frac{1}{3} </code>

Multiline formula

This formula is multiline:

$$ \int_0^1 xdx = \frac{1}{2} \\ \int_0^1 x^2dx = \frac{1}{3} $$

Source code:

<pre>@maths
\int_0^1 xdx = \frac{1}{2} \\
\int_0^1 x^2dx = \frac{1}{3} 
</pre>

Media

Image (via GitHub)

On Github, click on your image, then right click on Download, then click on Copy link address:

Example image
Example image

Source code:

<pre>@image
src: //github.com/glegoux/glegoux.com/raw/master/articles/2auZ9Ll/Example.jpg
title: Example image
</pre>

Static Graph/Diagram (via Google drawings)

On Google Drive, open your draw then go to menu File > Publish to the web:

Example diagram
Example diagram

Source code:

<pre>@googledrawings
src: //docs.google.com/drawings/d/e/2PACX-1vQM6rSFgZeQ7_blwvvnGclS3-K-gxB8GXRvQSepLM5ERrskSE0DFtNm44UlNpBK-rKekMlmeyfTVCrw/pub?w=960&amp
title: Example diagram
</pre>

Dynamic Graph/Diagram (via Javascript script)

Just copy your code directly:

Example Dynamic Graph/Diagram

Source code:

<pre>@dynamicdraw
<figure>
		<div>
			<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
			<script type="text/javascript">
					google.charts.load('current', {'packages':['corechart']});
					google.charts.setOnLoadCallback(drawChart);

					function drawChart() {

						var data = google.visualization.arrayToDataTable([
							['Task', 'Hours per Day'],
							['Work',     11],
							['Eat',      2],
							['Commute',  2],
							['Watch TV', 2],
							['Sleep',    7]
						]);

						var options = {
							title: 'My Daily Activities'
						};

						var chart = new google.visualization.PieChart(document.getElementById('piechart'));

						chart.draw(data, options);
					}
			</script>
			<div id="piechart" style="width: 900px; height: 500px;"></div>
	</div>
	<figcaption>Example Dynamic Graph/Diagram </figcaption>
</figure>
</pre>

Video (via Youtube)

On Youtube, right click on video and click on Copy embed code

Example video

Source code:

<pre>@youtube
src: //www.youtube.com/embed/q4y0KOeXViI
title: Example video
</pre>

Slides (via Google Slides or SlideShare)

On Google Drive, open your presentation then go to menu File > Publish to the web:

Example presentation Google Slides

Source code:

<pre>@googleslides
src: //docs.google.com/presentation/d/e/2PACX-1vQ6i-TfBGy4uPUPigZpCruziiClwc7onjyBYVAyRZ8ud67TEsMYqndZvNiQB-jJ0qsa3YRviB7uu15R/embed?start=false&loop=true&delayms=60000
title: Example presentation Google Slides
</pre>

On SlideShare, click on Share button below presentation then on Embed field:

Example presentation Slide Share

Source code:

<pre>@slideshare
src: //www.slideshare.net/slideshow/embed_code/key/nWc1MerX84AkCK
title: Example presentation Slide Share
</pre>

Embedded post

Tweet (via Twitter)

On Twitter, click on the right top of tweet, then choose Embed Tweet.

Source code:

<pre>@tweet
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">stable Ubuntu 18.04 LTS release arrives later today ‘Bionic Beaver’<a href="https://t.co/mMCH8CgSy4">https://t.co/mMCH8CgSy4</a> <a href="https://t.co/jMNGXAQ8ZP">pic.twitter.com/jMNGXAQ8ZP</a></p>&mdash; glegoux (@GillesLegoux) <a href="https://twitter.com/GillesLegoux/status/989387915661897729?ref_src=twsrc%5Etfw">April 26, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</pre>

Gist (via GitHub)

On Github, choose one gist and click on Embed.

Source code:

<pre>@gist
<script src="https://gist.github.com/glegoux/08d231e0d474fb7fe5039374793e2253.js"></script>
</pre>

Demonstration front-end (via jsfiddle)

On JSFiddle, choose one fiddle and click on Embed.

Source code:

<pre>@jsfiddle
<script async src="//jsfiddle.net/glegoux/mc3pp0Lf/embed/result,html,css/"></script>
</pre>

Escape

HTML

For escaping HTML code, do:

~~~
<html>
<a href="#href">anchor</a>
~~~

Render:

<html>
<a href="#href">anchor</a>

But this is valid if HTML code does not contain blocks '<pre>' and/or '~~~'

Blocks

There are 2 families of blocks: '<pre>' and '~~~'. Each one cannot contain a block of same family, it doesn't make sense anyway.

For escaping each block of type '<pre>', do:

~~~ @escape
<pre>@type
content
</pre>
~~~

Render:

<pre>@type
content
</pre>

For escaping each block of type '~~~', do:

<pre>
~~~ type
content
~~~
</pre>

Render:

~~~ type
content
~~~

References

~~~  @escape
@ref-example-web
~~~ 

Render:

@ref-example-web

Emoticon

~~~  @escape
:smile: :scream: :yum:
~~~ 

Render:

:smile: :scream: :yum:

Written by Gilles Legoux (glegoux) - Software Engineer.