Markdown Snippets

Markdown Snippets

Posted
By Imran Haq
7 min read
Markdown Snippets

  Vega & Vega-Lite Data Source Repo  

Step  

Step  

icons

  Level2

 Level3

 Level4

 Brain

 SkullCrossbones

 digging

 chart-look

 hands

 bog-roll

 chart-look

 Pepper

 Smoking

 Level5

 Level6

Link button

1
2
3
4
5
6
7
8

SELECT 
t.column1
-, t.column2
, t.column3
FROM table1 as t
no removal
+ newline
- removed line

lists

bullets

  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6

Click on the @icn-camera icon to take a screen shot.

Click on the @icon-camera icon to take a screen shot.

Visit Blog ##

Configuration

Configuration can be launched from the Tools -> Settings menu option.

Used on a button:


My Python Script

1
2

def hello():
    print("Hello, world!")



1
2
3
4
5
6
7

{
  "data": {"name": "dataset"}
  // comments
  /* json comments */
  ...
}

link to check box

architecture-beta
    group api(cloud)[API]
    group pbi(cloud)

    service db(database)[Database] in api
    service disk1(disk)[PowerBI] in pbi
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L --> R:disk1
    disk1:T -- B:server
    disk2:T -- B:db

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

erDiagram
    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER ||--o{ INVOICE : "liable for"
    DELIVERY-ADDRESS ||--o{ ORDER : receives
    INVOICE ||--|{ ORDER : covers
    ORDER ||--|{ ORDER-ITEM : includes
    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
    PRODUCT ||--o{ ORDER-ITEM : "ordered in"

graph LR
    A[Start] --> B[Process AI Data]
    B --> C[Train Model]
    C --> D[Deploy Model]
    D --> E[Monitor Results]
    E --> F[Refine Model]
    F --> C



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Reproducing http://robslink.com/SAS/democd91/pyramid_pie.htm",
  "data": {
    "values": [
      {"category": "Sky", "value": 75, "order": 3},
      {"category": "Shady side of a pyramid", "value": 10, "order": 1},
      {"category": "Sunny side of a pyramid", "value": 15, "order": 2}
    ]
  },
  "mark": {"type": "arc", "outerRadius": 80},
  "encoding": {
    "theta": {
      "field": "value", "type": "quantitative",
      "scale": {"range": [2.35619449, 8.639379797]},
      "stack": true
    },
    "color": {
      "field": "category", "type": "nominal",
      "scale": {
        "domain": ["Sky", "Shady side of a pyramid", "Sunny side of a pyramid"],
        "range": ["#416D9D", "#674028", "#DEAC58"]
      },
      "legend": {
        "orient": "none",
        "title": null,
        "columns": 1,
        "legendX": 200,
        "legendY": 80
      }
    },
    "order": {
      "field": "order"
    }
  }
}


Column 1Column 2
Example JSON 1{ "name": "Alice", "age": 25 }
Example JSON 2{ "city": "New York", "country": "USA" }
Column 1Column 2
Example JSON 1json {"name": "Alice", "age": 25}
Example JSON 2json {"city": "New York", "country": "USA"}
Code Block 1Code Block 2

      { "data": {"name": "dataset"} } 
      
 
      { "data": 
      + {"name": "dataset"} 
      } 
    
1
2
3
4
5

SELECT 
t.column1
, t.column2
, t.column3
FROM table1 as t

1
2
3
4
5

SELECT 
t.column1
, t.column2
, t.column3
FROM table1 as t

ℹ️ Note: Here’s a small note for reference.

💀 Note: Here’s a small note for reference.

⚠️ Note: Here’s a small note for reference.

⛔ Note: Here’s a small note for reference.

This is an example of a Tip.

This is an example of an Info block.

This is an example of a Warning block.

This is an example of a Danger block.

dax highlighter

```dax title= “dax title” Distinct Vertices Label Prop = CALCULATE( COUNTROWS( DISTINCT( ‘Vertices Label Prop’[id] ) ) , ‘Vertices Label Prop’[Type] in {“User”, “Group”} )

1
2
3
4
5
6
7


```powerquery
let
  source = "sample text using prism.js"
in
  source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// power query code
Table.AddColumn(
  v_date_serial, 
  "rec_year", 
  each [
    calendar_year        = Date.Year([date_id]), 
    current_year         = Date.Year(v_current_date), 
    calendar_year_offset = calendar_year - current_year, 
    is_year_complete     = if Date.EndOfYear([date_id]) < Date.EndOfYear(v_current_date) then 1 else 0, 
    is_cmtd              = if ([date_id] <= Date.AddDays(Date.StartOfMonth(Date.From(v_current_date)), - 1)) then 1 else 0, 
    is_ytd               = if ([date_id] <= Date.From(v_current_date)) then 1 else 0, 
    is_frc               = if ([date_id] > Date.From(v_current_date)) then 1 else 0
  ], 
  type [
    calendar_year        = Int64.Type, 
    calendar_year_offset = Int64.Type, 
    is_year_complete     = Int64.Type, 
    is_cmtd              = Int64.Type, 
    is_ytd               = Int64.Type, 
    is_frc               = Int64.Type
  ]
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// power query code
Table.AddColumn(
  v_date_serial, 
  "rec_year", 
  each [
    calendar_year        = Date.Year([date_id]), 
    current_year         = Date.Year(v_current_date), 
    calendar_year_offset = calendar_year - current_year, 
    is_year_complete     = if Date.EndOfYear([date_id]) < Date.EndOfYear(v_current_date) then 1 else 0, 
    is_cmtd              = if ([date_id] <= Date.AddDays(Date.StartOfMonth(Date.From(v_current_date)), - 1)) then 1 else 0, 
    is_ytd               = if ([date_id] <= Date.From(v_current_date)) then 1 else 0, 
    is_frc               = if ([date_id] > Date.From(v_current_date)) then 1 else 0
  ], 
  type [
    calendar_year        = Int64.Type, 
    calendar_year_offset = Int64.Type, 
    is_year_complete     = Int64.Type, 
    is_cmtd              = Int64.Type, 
    is_ytd               = Int64.Type, 
    is_frc               = Int64.Type
  ]
)

dax highlighter

1
2
3
4
5

Distinct Vertices Label Prop = 
CALCULATE( 
  COUNTROWS( DISTINCT( 'Vertices Label Prop'[id] ) )
  , 'Vertices Label Prop'[Type] in {"User", "Group"} 
)

check boxes

check boxes

  • check1
  • check2

terms

Define a Term
definition

[!NOTE]
Highlights information that users should take into account, even when skimming.

[!IMPORTANT]
Crucial information necessary for users to succeed.

[!WARNING]
Critical content demanding immediate user attention due to potential risks.

Note This is a note

Warning This is a warning

Simple alerts

[!NOTE] This is a note.

[!TIP] This is a tip. (Supported since 14 Nov 2023)

[!IMPORTANT] Crutial information comes here.

[!CAUTION] Negative potential consequences of an action. (Supported since 14 Nov 2023)

[!WARNING] Critical content comes here.

⚠️ Warning

You shouldn’t. This is irreversible!

❌ Error

Don’t do that. This is irreversible!

ℹ️ Information

You can do that without problem.

✅ Success

Don’t hesitate to do that.

🦄 New line support

It supports new lines:

.. simply use an empty > line

 Dropdown


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18


{ // WRITTEN IN DROPDOWN
    $schema: "https://vega.github.io/schema/vega-lite/v5.json",
    description: "A simple bar chart with embedded data.",
    data: {
      values: [
        {a: "A", b: 28}, /* comments */
        {a: "B", b: 55}, // comments2
        {a: "I", b: 52}
      ]
    },
    mark: "bar",
    encoding: {
      x: {field: "a", type: "ordinal"},
      y: {field: "b", type: "quantitative"}
    }
  }




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


{ // WRITTEN IN MARKDOWN
    $schema: "https://vega.github.io/schema/vega-lite/v5.json",
    description: "A simple bar chart with embedded data.",
    data: {
      values: [
        {a: "A", b: 28}, /* comments */
        {a: "B", b: 55}, // comments2
        {a: "C", b: 43},
        {a: "D", b: 91},
        {a: "E2", b: 81},
        {a: "F", b: 53},
        {a: "G", b: 19},
        {a: "H", b: 87},
        {a: "I", b: 52}
      ]
    },
    mark: "bar",
    encoding: {
      x: {field: "a", type: "ordinal"},
      y: {field: "b", type: "quantitative"}
    }
  }


 Reveal Code: HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<html>
<div id="vis0"></div>
  <script type="text/javascript">
    var spec = {
      $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
      description: 'A simple bar chart with embedded data.',
      width: 400,
      height: 200,
      data: {
        values: [
          {a: 'A', b: 28},
          {a: 'B', b: 55},
          {a: 'C', b: 43},
          {a: 'D', b: 91},
          {a: 'E', b: 81},
          {a: 'F', b: 53},
          {a: 'G', b: 19},
          {a: 'H', b: 87},
          {a: 'I', b: 52}
        ]
      },
      mark: 'bar',
      encoding: {
        x: {field: 'a', type: 'ordinal'},
        y: {field: 'b', type: 'quantitative'}
      }
    };
    vegaEmbed('#vis0', spec);
  </script>
</html>


 Reveal Code: VEGALITE

 Reveal Code: VEGALITE






Prompt Blocks

text new text here

subsection

text2

subsection3

text3

  Dataset

Add Markdown syntax content to file _tabs/about.md and it will show up on this page.

Add another markdown bit here


1
2
3

function helloWorld() {
    console.log("Hello, world!");
}


Alternatively, you can use HTML:

1
2
3
4
5

<pre><code class="language-javascript">
function helloWorld() {
    console.log("Hello, world!");
}
</code></pre>
This post is licensed under CC BY 4.0 by the author.