Source code

1. Basic block syntax highlighting

Code blocks contain a language identifier, which is used to determine the language of the code. This language is used to determine the syntax highlighting, using an available options: ‘python’, ‘markdown’, ‘RST’ and ‘Typescript’. If you need another option please create a ticket. <!–pygments lexer.

Markdown:

Markdown  
```python
from a import b
c = "string"
```

Rendered Output:

Python  
from a import b
c = "string"
Show backticks inside raw markdown blocks

If you’d like to show backticks inside of your markdown, you can do so by nesting them in backticks of a greater length. Markdown will treat the outer-most backticks as the edges of the “raw” block and everything inside will show up. For example: Markdown:

Markdown  
`` `hi` ``

````
```
hi
```

Rendered Output:

`hi`

Default  
```
hi
```

2. Adding a caption

With the code-block {{directive}}, a caption can be added to a code blocks, as well as other options:

Markdown:

Markdown  
```{code-block} python
:caption: This is a caption
:emphasize-lines: 2,3
:lineno-start: 1

a = 1
b = 2
c = 3
```

Rendered Output:

This is a caption
Python  
1a = 1
2b = 2
3c = 3

The following options are recognized:

Code block options

linenos : flag : Enable to generate line numbers for the code block

lineno-start : integer : The starting line number for the code block (linenos is automatically enabled)

emphasize-lines : comma-separated list of integers : Highlight the specified lines

caption : string : The caption for the code block

force : flag : Allow minor errors on highlighting to be ignored

name : string : The name of the code block, which can be referenced elsewhere in the document

class : string : The class to apply to the code block

3. Big Code Examples

For bigger code examples the max height is set and scrollbars appear.

TypeScript  
type MyBool = true | false;
type WindowStates = "open" | "closed" | "minimized";
type LockStates = "locked" | "unlocked";
type PositiveOddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;

interface User {
  name: string;
  id: number;
}

interface Point {
  x: number;
  y: number;
}
 
function logPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}
 
// logs "12, 26"
const point = { x: 12, y: 26 };
logPoint(point); 

class VirtualPoint {
  x: number;
  y: number;
 
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}
 
const newVPoint = new VirtualPoint(13, 56);
logPoint(newVPoint); // logs "13, 56"

let isOpen = false;
let isMobile = false;
let isDesktop = true;

if(isOpen === true || isMobile == false) {
  if(isDesktop == true) {
    if(isOpen == true) {
      console.log('this is a very very very very very very very very very very very very very very very very very very very very very very very very long log message')
    }
  }
}

const anyTypeString = [];
const anyTypeString2: any[] = [];

const stringArr = ["Hello", "how", "are", "you"];
const stringArr2: string[] = ["Hello", "how", "are", "you"];
// X - stringArr.push(34)

const strAndNum = ["Hi", 143];
const strAndNum2: (string | number)[] = ["Hi", 143];
// X - strAndNum2[0](boolean)

const mixedData = ["bye", true, 77];
const mixedData2: (string | boolean | number)[] = ["bye", true, 77];

enum Alphabet {
  A = 1,
  B,
  C,
  D,
  E,
}

// If not assigned the first value- enum Alphabet { A , B, C, D, E }
console.log(Alphabet.C); // 0

// If assigned the first value
console.log(Alphabet.C); // 3

// 7.1 Type Alias
type numberOrString = number | string;
type stringOrNumArr = (string | number)[];

let job_id: numberOrString;

type Programmer = {
  name: string;
  age: number;
  devices: stringOrNumArr; // Can be used in another alias
};

// 7.2 Literal Type
let myName: "Riyad";
let userName: "Riyad" | "Jobayer" | "Sadik" | "Al-amin";
userName = "Jobayer";

type strType = string
type strOrNum = string | number
type tsType = 'TypeScript'

let ts: strType = 'TypeScript'
let ts2 = ts as strType // less specific
let typeScript = ts as tsType // more specific

let myStr = <strType>'Riyad'
let myStr2 = <number | string>'Riyad'

const addOrConcat = (a: number, b: number, c: 'add' | 'concat'): number | string => {
  if (c === 'add') return a + b
  return '' + a + b
}
let myVal: string = addOrConcat(2, 2, 'concat') as string // To prevent getting error

// The DOM
const img = document.querySelector('img')!
const myImg = document.getElementById('#img') as HTMLImageElement
const nextImg = <HTMLImageElement>document.getElementById('#img')
img.src
myImg.src

const year = document.getElementById("year") as HTMLSpanElement
const thisYear: string = new Date().getFullYear().toString()
year.setAttribute("datetime", thisYear)
year.textContent = thisYear
Last updated: Feb 3, 2025
Need help?Contact Support
Questions?Contact us