📝 About GitHub markdown

Question

📝 About GitHub markdown

wulfland opened this issue 2 years ago · comments

This issue contains the most important features of GitHub flavored markdown. See this page for the source and rendered version.

Note
Not all features render in GitHub Pages !

Michael Kaufmann · Answer 1 · Tue Feb 15 2022 17:30:06 GMT+0800 (China Standard Time)

Headings

`#` Heading

`##` Heading2

`###` Heading3

Formatting text

Formatting **bold text**, _italic text_ and ***bold and italic***.
You can also use ~~~~strikethrough text~~~~.

> This is a quote

>> This is a nested quote

Michael Kaufmann · Answer 2 · Tue Feb 15 2022 17:43:16 GMT+0800 (China Standard Time)

Links

https://xpirit.com/
Link Text

Michael Kaufmann · Answer 3 · Wed Feb 16 2022 02:09:31 GMT+0800 (China Standard Time)

Images

Test.pdf

Michael Kaufmann · Answer 4 · Wed Feb 16 2022 15:44:17 GMT+0800 (China Standard Time)

Videos

DarkMode_dribbble.mp4

Michael Kaufmann · Answer 5 · Wed Feb 16 2022 15:48:43 GMT+0800 (China Standard Time)

Lists

List item 1
List item 2

Item 1
Item 2

Nested lists

Root
- First nested item
  - Second nested item

Michael Kaufmann · Answer 6 · Wed Feb 16 2022 15:55:55 GMT+0800 (China Standard Time)

Footnotes

You can user a footnote¹ in markdown that allows you to jump to it and back using links.

A footnote can have multiple lines².

You can also use words, to fit your writing style more closely³.

My reference. ↩
Every new line should be prefixed with 2 spaces.
This allows you to have a footnote with multiple lines. ↩
Named footnotes will still render with numbers instead of the text but allow easier identification and linking.
This footnote also has been made with a different syntax using 4 spaces for new lines. ↩

Michael Kaufmann · Answer 7 · Wed Feb 16 2022 16:02:28 GMT+0800 (China Standard Time)

Comments and escaping

Use \ to escape markdown: This text is *not bold* and _not italic_.

Michael Kaufmann · Answer 8 · Wed Feb 16 2022 16:06:14 GMT+0800 (China Standard Time)

emojis and keyboard keys

👍 🏅 👎 💯 🏆 🏠

Ctrl Enter Space Ctrl+C

Michael Kaufmann · Answer 9 · Wed Feb 16 2022 23:01:08 GMT+0800 (China Standard Time)

Tables

Left-aligned	Center-aligned	Right-aligned
title1	`git status`	1.75%
title2	`git diff`	2.81%
title3	`git add`	3.51%

Michael Kaufmann · Answer 10 · Wed Feb 16 2022 23:07:10 GMT+0800 (China Standard Time)

Collapsable sections

This content is hidden by default and you have to click `Details` to see it.

Details with custom summary

Michael Kaufmann · Answer 11 · Wed Feb 16 2022 23:44:05 GMT+0800 (China Standard Time)

Syntax highlighted code blocks

C#:

void WriteHelloWorld(string name)
{
  Console.WriteLine("Hello World and {0}!", name);
}
WriteHelloWorld("John Doe");
// writes 'Hello World and Johnm Doe' to STDOUT

Ruby:

def print_helloWorld(name)
  puts "Hello World and #{name}!"
end
print_helloWorld('Jon Doe')
#=> prints 'Hello World and Jon Doe!' to STDOUT.

JavaScript:

function writeHelloWorld(name) {
  console.log(`Hello World and ${name}!`);
}
writeHelloWorld('Jon Doe');
// writes 'Hello World and Jon Doe!' to STDOUT.

Michael Kaufmann · Answer 12 · Wed Feb 16 2022 23:50:08 GMT+0800 (China Standard Time)

Flow Chart

graph RL;
    7e536==>96a85;
    b7e6b==>7e536;
    main-.->b7e6b;
    HEAD-->main;
    55805==>7e536;
    branch-.->55805;
    tag-.->55805;

Michael Kaufmann · Answer 13 · Wed Feb 16 2022 23:55:36 GMT+0800 (China Standard Time)

Sequence diagram

sequenceDiagram
    participant Me
    participant You
    Me->>You: Hello, how are you?
    loop Self reflection
        You->>You: How am I?
    end
    Note right of You: Say the truth? 🤔 
    You-->>Me: Great!

Michael Kaufmann · Answer 14 · Thu Feb 17 2022 00:03:31 GMT+0800 (China Standard Time)

Gant Diagram

gantt
dateFormat  YYYY-MM-DD
title Preparing conference talk
excludes weekdays 2022-02-16

section Prep
Prepare Slides :done,    des1, 2022-02-01,2022-02-15
Prepare Demo :active,  des2, 2022-02-17, 3d

section Conference
Talk 1 : des3, after des2, 5d
Talk 2 : des4, after des3, 5d

Michael Kaufmann · Answer 15 · Thu Feb 17 2022 00:13:53 GMT+0800 (China Standard Time)

Class diagram

classDiagram
Truck <|-- Vehicle : specialized
Bike *-- Vehicle
Truck : size()
Vehicle : int Wheels

Michael Kaufmann · Answer 16 · Thu Feb 17 2022 00:25:47 GMT+0800 (China Standard Time)

Mentions

Mention using GitHub handle: @kaufm

Michael Kaufmann · Answer 17 · Thu Feb 24 2022 01:33:42 GMT+0800 (China Standard Time)

Reference labels

Reference labels in markdown: documentation Improvements or additions to documentation

Michael Kaufmann · Answer 18 · Wed Mar 23 2022 21:05:52 GMT+0800 (China Standard Time)

Geo location

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [-4.842228, 36.502749]
  },
  "properties": {
    "name": "Kitesurf Zone",
    "Conditions": "Poniente, Levante",
    "Ratings": "⭐ ⭐ ⭐ ⭐ ⭐ "
  }
}

Michael Kaufmann · Answer 19 · Wed Mar 23 2022 21:14:58 GMT+0800 (China Standard Time)

topoJSON

{
    "type": "Topology",
    "objects": {
        "data": {
            "geometries": [
                {
                    "id": "0",
                    "type": "Polygon",
                    "properties": {"name": "abc"},
                    "bbox": [0.0, 0.0, 1.0, 1.0],
                    "arcs": [[-2, 0]]
                },
                {
                    "id": "1",
                    "type": "Polygon",
                    "properties": {"name": "def"},
                    "bbox": [1.0, 0.0, 2.0, 1.0],
                    "arcs": [[1, 2]]
                }
            ],
            "type": "GeometryCollection"
        }
    },
    "bbox": [0.0, 0.0, 2.0, 1.0],
    "arcs": [
        [[1.0, 0.0], [0.0, 0.0], [0.0, 1.0], [1.0, 1.0]], [[1.0, 0.0], [1.0, 1.0]],
        [[1.0, 1.0], [2.0, 1.0], [2.0, 0.0], [1.0, 0.0]]
    ]
}

Michael Kaufmann · Answer 20 · Wed Mar 23 2022 21:19:34 GMT+0800 (China Standard Time)

STL 3D rendering

solid b'STLB ATF 10.13.0.1454 COLOR=&\x83\xe7\xff'
facet normal -0.000000 0.000000 34.810009
  outer loop
    vertex 50.000000 5.900000 5.900000
    vertex 50.000000 0.000000 5.900000
    vertex 55.900002 5.900000 5.900000
  endloop
endfacet
facet normal 0.000000 0.000000 34.810009
  outer loop
    vertex 55.900002 5.900000 5.900000
    vertex 50.000000 0.000000 5.900000
    vertex 55.900002 0.000000 5.900000
  endloop
endfacet
facet normal -0.000000 -0.000000 -34.810009
  outer loop
    vertex 55.900002 5.900000 0.000000
    vertex 55.900002 0.000000 0.000000
    vertex 50.000000 5.900000 0.000000
  endloop
endfacet
facet normal 0.000000 0.000000 -34.810009
  outer loop
    vertex 50.000000 5.900000 0.000000
    vertex 55.900002 0.000000 0.000000
    vertex 50.000000 0.000000 0.000000
  endloop
endfacet
facet normal 34.810001 -0.000000 0.000000
  outer loop
    vertex 55.900002 0.000000 5.900000
    vertex 55.900002 0.000000 0.000000
    vertex 55.900002 5.900000 5.900000
  endloop
endfacet
facet normal 34.810001 0.000000 0.000000
  outer loop
    vertex 55.900002 5.900000 5.900000
    vertex 55.900002 0.000000 0.000000
    vertex 55.900002 5.900000 0.000000
  endloop
endfacet
facet normal 0.000000 -34.810009 0.000000
  outer loop
    vertex 50.000000 0.000000 5.900000
    vertex 50.000000 0.000000 0.000000
    vertex 55.900002 0.000000 5.900000
  endloop
endfacet
facet normal 0.000000 -34.810009 -0.000000
  outer loop
    vertex 55.900002 0.000000 5.900000
    vertex 50.000000 0.000000 0.000000
    vertex 55.900002 0.000000 0.000000
  endloop
endfacet
facet normal -34.810001 -0.000000 -0.000000
  outer loop
    vertex 50.000000 5.900000 5.900000
    vertex 50.000000 5.900000 0.000000
    vertex 50.000000 0.000000 5.900000
  endloop
endfacet
facet normal -34.810001 0.000000 0.000000
  outer loop
    vertex 50.000000 0.000000 5.900000
    vertex 50.000000 5.900000 0.000000
    vertex 50.000000 0.000000 0.000000
  endloop
endfacet
facet normal 0.000000 34.810009 0.000000
  outer loop
    vertex 55.900002 5.900000 5.900000
    vertex 55.900002 5.900000 0.000000
    vertex 50.000000 5.900000 5.900000
  endloop
endfacet
facet normal 0.000000 34.810009 0.000000
  outer loop
    vertex 50.000000 5.900000 5.900000
    vertex 55.900002 5.900000 0.000000
    vertex 50.000000 5.900000 0.000000
  endloop
endfacet
endsolid b'STLB ATF 10.13.0.1454 COLOR=&\x83\xe7\xff'

Michael Kaufmann · Answer 21 · Wed May 25 2022 22:11:58 GMT+0800 (China Standard Time)

Past tables and spreadsheets to markdown:

Animal	Color	Amount
Tiger	Yellow	25
Horse	Brown	7

Disable using cmd|ctrl+shift+v:

Animal Color Amount
Tiger Yellow 25
Horse Brown 7

Michael Kaufmann · Answer 22 · Wed May 25 2022 22:19:11 GMT+0800 (China Standard Time)

Render mathematical expressions in Markdown using LaTeX syntax:

The Cauchy-Schwarz Inequality
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$

Render it inline:
This sentence uses $ delimiters to show math inline: $\sqrt{3x-1}+(1+x)^2$

Michael Kaufmann · Answer 23 · Wed May 25 2022 22:32:20 GMT+0800 (China Standard Time)

Display images depending on theme:

You can now also use picture tag - but you must refresh the page after switching the theme using the command palette:

Michael Kaufmann · Answer 24 · Fri Sep 09 2022 21:45:28 GMT+0800 (China Standard Time)

Mermaid diagrams with themes

In themes the mermaid diagrams might look strange. @rajbos found out how to do this:

%%{init: {'theme':'dark'}}%%
pie title Some random data
  "Some percentage" : 15
  "Minority" : 5
  "Big part" : 80

Michael Kaufmann · Answer 25 · Thu Mar 23 2023 17:40:12 GMT+0800 (China Standard Time)

Mardown helpers (public beta)

Type / and you will get a dropdown that will help you to write markdown:

Helpers currently include:

Codeblocks
Details
Saved Replies
Tables
Templates
Tasklists (new)

Michael Kaufmann · Answer 26 · Thu May 18 2023 00:15:55 GMT+0800 (China Standard Time)

New delimiter syntax for inline mathematical expressions

LaTeX-style math syntax with dollar signs and backticks (for example $'\sqrt{3}'$ , $\sqrt{3}$)

$\sqrt{3x-1}+(1+x)^2$

📝 About GitHub markdown

Headings

# Heading

## Heading2

### Heading3

Formatting text

Links

Images

Videos

Lists

Nested lists

Footnotes

Footnotes

Comments and escaping

emojis and keyboard keys

Tables

Collapsable sections

Syntax highlighted code blocks

Flow Chart

Sequence diagram

Gant Diagram

Class diagram

Mentions

Reference labels

Geo location

topoJSON

STL 3D rendering

Past tables and spreadsheets to markdown:

Render mathematical expressions in Markdown using LaTeX syntax:

Display images depending on theme:

Mermaid diagrams with themes

Mardown helpers (public beta)

New delimiter syntax for inline mathematical expressions

`#` Heading

`##` Heading2

`###` Heading3