wulfland / AccelerateDevOps

This is the companion repository for my book Accelerate DevOps with GitHub (2022). You can find all hands-on labs and other examples from the book here. Please reach out to me if something is broken.
https://www.amazon.com/dp/B0B4DW7NSL/ref=cm_sw_r_tw_dp_B4DR80D2BBERYNSQ5V9C
MIT License
42 stars 76 forks source link

📝 About GitHub markdown #232

Open wulfland opened 2 years ago

wulfland commented 2 years ago

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 !

wulfland commented 2 years ago

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

wulfland commented 2 years ago

Links

https://xpirit.com/ Link Text

wulfland commented 2 years ago

Images

octocat Test.pdf

wulfland commented 2 years ago

Videos

https://user-images.githubusercontent.com/5276337/154125940-0172902e-da3f-4e6e-a4a4-cab7c6a86cde.mp4

wulfland commented 2 years ago

Lists

  1. Item 1
  2. Item 2

Nested lists

  1. Root
    • First nested item
      • Second nested item
wulfland commented 2 years ago

Footnotes

You can user a footnote[^1] in markdown that allows you to jump to it and back using links.

A footnote can have multiple lines[^2].

You can also use words, to fit your writing style more closely[^note].

[^1]: My reference. [^2]: Every new line should be prefixed with 2 spaces.
This allows you to have a footnote with multiple lines. [^note]: 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.

wulfland commented 2 years ago

Comments and escaping

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

wulfland commented 2 years ago

emojis and keyboard keys

:+1: :shipit: :medal_sports: :-1: :100: :trophy: :house:

Ctrl Enter Space Ctrl+C

wulfland commented 2 years ago

Tables

Left-aligned Center-aligned Right-aligned
title1 git status 1.75%
title2 git diff 2.81%
title3 git add 3.51%
wulfland commented 2 years ago

Collapsable sections

This content is hidden by default and you have to click `Details` to see it.
Details with custom summary
wulfland commented 2 years ago

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.
wulfland commented 2 years ago

Flow Chart

graph RL;
    7e536==>96a85;
    b7e6b==>7e536;
    main-.->b7e6b;
    HEAD-->main;
    55805==>7e536;
    branch-.->55805;
    tag-.->55805;
wulfland commented 2 years ago

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!
wulfland commented 2 years ago

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
wulfland commented 2 years ago

Class diagram

classDiagram
Truck <|-- Vehicle : specialized
Bike *-- Vehicle
Truck : size()
Vehicle : int Wheels
wulfland commented 2 years ago

Mentions

Mention using GitHub handle: @kaufm

wulfland commented 2 years ago

Reference labels

Reference labels in markdown: https://github.com/wulfland/AccelerateDevOps/labels/documentation

wulfland commented 2 years ago

Geo location

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

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]]
    ]
}
wulfland commented 2 years ago

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'
wulfland commented 2 years ago

Past tables and spreadsheets to markdown:

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">

Animal | Color | Amount -- | -- | -- Tiger | Yellow | 25 Horse | Brown | 7

Disable using cmd|ctrl+shift+v:

Animal Color Amount Tiger Yellow 25 Horse Brown 7

wulfland commented 2 years ago

Render mathematical expressions in Markdown using LaTeX syntax:

The Cauchy-Schwarz Inequality $$\left( \sum_{k=1}^n a_k bk \right)^2 \leq \left( \sum{k=1}^n ak^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$

wulfland commented 2 years ago

Display images depending on theme:

Light Dark

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

wulfland commented 2 years ago

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
wulfland commented 1 year ago

Mardown helpers (public beta)

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

image

Helpers currently include:

wulfland commented 1 year ago

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$