Code Samples for the syntax highlighting

Please refer to the following page for instructions on how to display code titles and line numbers and highlight lines:
timlrx/rehype-prism-plus: rehype plugin to highlight code blocks in HTML with Prism (via refractor) with line highlighting and line numbers
rockchalkwushock/rehype-code-titles: Rehype plugin for parsing code blocks and adding titles to code blocks

JavaScript with line number

function factorial(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

console.log(factorial(5)); // Output: 120

CSS with code title & line number

title

/* Styles for a button */
.button {
  background-color: #3498db;
  border: none;
  color: white;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

HTML with line highlighting

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Welcome to my website!</h1>
    <p>Here is some text.</p>
    <script src="script.js"></script>
  </body>
</html>

JSX with line highlighting & line number

import React from "react";

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <p>This is a React component.</p>
    </div>
  );
}

export default App;

Markup

<h1>Hello, world!</h1>
<p>This is some text.</p>

Bash

#!/bin/bash

echo "Hello, world!"

SCSS

$primary-color: #3498db;

.button {
  background-color: $primary-color;
  border: none;
  color: white;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

TSX

import React from "react";

interface Props {
  name: string;
}

function Hello({ name }: Props) {
  return <div>Hello, {name}!</div>;
}

export default Hello;

TypeScript

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

function greet(user: User) {
  console.log(`Hello, ${user.name}! You are ${user.age} years old.`);
}

greet({ name: "Alice", age: 30 }); // Output: Hello, Alice! You are 30 years old.

Go

package main

import "fmt"

func main() {
    fmt.Println("Hello, world!")
}

JSON

{
  "name": "John",
  "age": 30,
  "city": "New York"
}

Markdown

This is some text.

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

**Bold text**

_Italic text_

`Code`

PHP

<?php
  echo "Hello, world!";
?>

Python

def factorial(n):
    if n == 0:
        return 1
    else:
        return n * factorial(n-1)

print(factorial(5)) # Output: 120

Regex

const re = /ab+c/;
const str = 'abc';
console.log(re.test(str)); // true

Ruby

def factorial(n)
  if n == 0
    1
  else
    n * factorial(n-1)
  end
end

puts factorial(5)

SQL

SELECT id, name, email
FROM users
WHERE email LIKE '%example.com';

YAML

---
- name: Alice
  age: 24
  job: Engineer
- name: Bob
  age: 32
  job: Manager
- name: Carol
  age: 28
  job: Designer