Skip to content

Instantly share code, notes, and snippets.

@jprivet-dev
Last active April 4, 2024 06:39
Show Gist options
  • Save jprivet-dev/88c9c74561e78c2a7f06858e1eac56ff to your computer and use it in GitHub Desktop.
Save jprivet-dev/88c9c74561e78c2a7f06858e1eac56ff to your computer and use it in GitHub Desktop.
[Cheatsheet] Markdown & Asciidoctor rendering in GitHub

[Cheatsheet] Asciidoctor rendering in GitHub

Table of Contents (TOC)

Configuration :

:toc: macro
:toc-title: Summary
:toclevels: 3

Render :

toc::[]

Paragraphs

Line breaks

Rubies are red, +
Topazes are blue.

Rubies are red,
Topazes are blue.

Emphasis

bold *constrained* & **un**constrained

italic _constrained_ & __un__constrained

bold italic *_constrained_* & **__un__**constrained

bold constrained & unconstrained

italic constrained & unconstrained

bold italic constrained & unconstrained

monospace `constrained` & ``un``constrained

monospace bold `*constrained*` & ``**un**``constrained

monospace italic `_constrained_` & ``__un__``constrained

monospace bold italic `*_constrained_*` & ``**__un__**``constrained

monospace constrained & unconstrained

monospace bold constrained & unconstrained

monospace italic constrained & unconstrained

monospace bold italic constrained & unconstrained

Marks and Custom Styling (does not work with GitHub)

Werewolves are allergic to #cassia cinnamon#.

Did the werewolves read the [.small]#small print#?

Where did all the [.underline]#cores# run off to?

We need [.line-through]#ten# make that twenty VMs.

[.big]##O##nce upon an infinite loop.

Werewolves are allergic to cassia cinnamon.

Did the werewolves read the small print?

Where did all the cores run off to?

We need ten make that twenty VMs.

Once upon an infinite loop.

Lists

. One
. Two
. Three
  1. One

  2. Two

  3. Three

* Edgar Allen Poe
* Sheri S. Tepper
* Bill Bryson
  • Edgar Allen Poe

  • Sheri S. Tepper

  • Bill Bryson

* level 1
** level 2
*** level 3
* level 1
  • level 1

    • level 2

      • level 3

  • level 1

Images

image::https://github.githubassets.com/images/modules/logos_page/Octocat.png[Octocat]
Octocat
.An Octocat
[#img-octocat]
[caption="Link to image: ",link=https://github.githubassets.com/images/modules/logos_page/Octocat.png]
image::https://github.githubassets.com/images/modules/logos_page/Octocat.png[Sunset,265,221]
Sunset
Link to image: An Octocat

Videos

video::https://youtu.be/Bjw6N7bjzf4?t=97[youtube]

Tables

[%header,format=csv]
|===
Artist,Track,Genre
Baauer,Harlem Shake,Hip Hop
The Lumineers,Ho Hey,Folk Rock
|===
Artist Track Genre

Baauer

Harlem Shake

Hip Hop

The Lumineers

Ho Hey

Folk Rock

Admonition

NOTE: An admonition paragraph draws the reader's attention to
auxiliary information.
Its purpose is determined by the label
at the beginning of the paragraph.
📎
An admonition paragraph draws the reader’s attention to auxiliary information. Its purpose is determined by the label at the beginning of the paragraph.
TIP: Pro tip...
💡
Pro tip…​
IMPORTANT: Don't forget...
Don’t forget…​
WARNING: Watch out for...
⚠️
Watch out for…​
CAUTION: Ensure that...
🔥
Ensure that…​
[NOTE]
====
An admonition block may contain complex content.

A list

- one
- two
- three

Another paragraph.
====
📎

An admonition block may contain complex content.

A list

  • one

  • two

  • three

Another paragraph.

Blockquote

[quote, Charles Lutwidge Dodgson, 'Mathematician and author, also known as https://en.wikipedia.org/wiki/Lewis_Carroll[Lewis Carroll]']
____
If you don't know where you are going, any road will get you there.
____

If you don’t know where you are going, any road will get you there.

— Charles Lutwidge Dodgson
Mathematician and author, also known as Lewis Carroll

Code

Inline

I think you should use an `<addr>` element here instead.

I think you should use an <addr> element here instead.

Syntax Highlighting

```javascript
function fancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }
}
```
function fancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }
}

Code block with title & callouts (ex. 1)

.file.xml
[source,xml]
----
<section>
  <title>Section Title</title> <\!--1-->
</section>
----
<1> The section title is required.
file.xml
<section>
  <title>Section Title</title> <!--(1)-->
</section>
  1. The section title is required.

Code block with title & callouts (ex. 2)

.file.rb
```ruby
require 'sinatra' // <1>

get '/hi' do // <2>
  "Hello World!" // <3>
end
```
<1> Library import
<2> URL mapping
<3> HTTP response body
file.rb
require 'sinatra' // (1)

get '/hi' do // (2)
  "Hello World!" // (3)
end
  1. Library import

  2. URL mapping

  3. HTTP response body

Keyboard

Shortcut Purpose

F11

Toggle fullscreen

Ctrl+T

Open a new tab

Ctrl+Shift+N

New incognito window

\

Used to escape characters

Ctrl+]

Jump to keyword

Ctrl++

Increase zoom

[Cheatsheet] Markdown rendering in GitHub

Table of Contents (TOC)

This is not possible!

Variables

This is not possible!

Paragraphs

Line breaks

Rubies are red, \
Topazes are blue.

Rubies are red,
Topazes are blue.

Emphasis

*This text will be italic*
_This will also be italic_

**This text will be bold**
__This will also be bold__

_You **can** combine them_

This text will be italic This will also be italic

This text will be bold This will also be bold

You can combine them

Lists

1. One
2. Two
3. Three
  1. One
  2. Two
  3. Three
* Edgar Allen Poe
* Sheri S. Tepper
* Bill Bryson
  • Edgar Allen Poe
  • Sheri S. Tepper
  • Bill Bryson
- Dashes work just as well
- And if you have sub points, put two spaces before the dash or star:
  - Like this
  - And this
  • Dashes work just as well
  • And if you have sub points, put two spaces before the dash or star:
    • Like this
    • And this

Images

![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/Octocat.png)

GitHub Logo

Admonition

This is not possible!

Blockquote

> I hold it that a little rebellion now and then is a good thing,
> and as necessary in the political world as storms in the physical.
> -- Thomas Jefferson, Papers of Thomas Jefferson: Volume 11

I hold it that a little rebellion now and then is a good thing, and as necessary in the political world as storms in the physical. -- Thomas Jefferson, Papers of Thomas Jefferson: Volume 11

Code

Inline

I think you should use an `<addr>` element here instead.

I think you should use an <addr> element here instead.

Syntax Highlighting

```javascript
function fancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }
}
```
function fancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }
}

Code block with title & callouts

This is not possible!

Resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment