Markdown Code Block Syntax Notes | Iqbal's Digital Garden

Basic Syntax

Use triple backticks to create a code block in markdown

```language
code goes here
```

Example:

```javascript
function debounce(func, timeout = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}
```

It will render like this:

function debounce(func, timeout = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}

File Name

Add :filename.ext after language to render a file name label at the top of the code block

Example:

```java:GetRowValue.java
private String[] getRowValue(Integer i, List<BillDetail> billDetail) {
  String[] rowValue = new String[5];
  rowValue[0] = (i).toString();
  i = i - 1;

  rowValue[1] = billDetail.get(i).getProductName();
  rowValue[2] = billDetail.get(i).getQuantity().toString();
  rowValue[3] = new DecimalFormat("#,###").format(Integer.parseInt(billDetail.get(i).getProductPrice()));   
  rowValue[4] = new DecimalFormat("#,###").format(billDetail.get(i).getSubTotal());

  return rowValue;
}
```

It will render like this:

GetRowValue.java

private String[] getRowValue(Integer i, List<BillDetail> billDetail) {
  String[] rowValue = new String[5];
  rowValue[0] = (i).toString();
  i = i - 1;

  rowValue[1] = billDetail.get(i).getProductName();
  rowValue[2] = billDetail.get(i).getQuantity().toString();
  rowValue[3] = new DecimalFormat("#,###").format(Integer.parseInt(billDetail.get(i).getProductPrice()));   
  rowValue[4] = new DecimalFormat("#,###").format(billDetail.get(i).getSubTotal());

  return rowValue;
}

Line Highlighting and Line Numbers

Add the {numbers} property after language to highlight lines
Add the showLineNumbers property after language to display line numbers

Example:

```html {1,4-6,10} showLineNumbers
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello world</title>
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>
```

It will render like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello world</title>
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>

Table

Use pipes | and dashes - to create tables.

Example:

```
| Name  | Age | Role     |
|-------|-----|----------|
| John  | 25  | Developer|
| Sarah | 28  | Designer |
```

It will render like this:

Name	Age	Role
John	25	Developer
Sarah	28	Designer

Image

Use the following syntax to display images.

Example:

```
![Alt text](https://placehold.co/600x400/EEE/31343C)
```

It will render like this:

Alt text

Link

Use this syntax to create links.

Example:

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

It will render like this:

Visit Google

Checklist

Use - [ ] for unchecked and - [x] for checked items.

Example:

```
- [x] Practice writing
- [ ] Build something
```

It will render like this:

Practice writing
Build something