Show Styling Markdown

This is a blog post to show styling markdown, e.g. components, code block, etc

Code Block

Line Numbers and Line Highlighting

Draw attention to a particular line of code. This should be highlight the line number 4.

example.tsx
import { useFloating } from "@floating-ui/react";
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
 
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}

Word Highlighting

Draw attention to a particular word or series of characters. This should be highlight the word floatingStyles.

tsx
import { useFloating } from "@floating-ui/react";
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating();
 
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}

Custom Icon

Tip

The default icon is detect using language or title name, but it can be override using icon="..." meta string. Here is an mdx syntax example:

mdx
```php title="example.blade.php" icon="iLaravel"
  @php
      echo "Hello, World!";
  @endphp
```

It must be showing an php icon, but because i passing icon="iLaravel" it will show laravel icon.

example.blade.php
@php
    echo "Hello, World!";
@endphp
example.tsx
export default function Home(props) {
  return <></>
}
is a caption

Custom Font

  • Using default font FiraCode Nerd Font Mono (which is support ligature variant)
ts
const check = a !== b; // This will show as a slashed equals sign
  • Using default font, but disable ligatures
ts
const check = a !== b;
  • Using custom font Ubuntu Mono
ts
const check = a !== b;

ANSI Highlighting

This should be highlight the ANSI characters.

ansi
Standard ANSI colors:
- Dimmed:      Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
- Foreground:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
- Background:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
- Reversed:    Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
 
8-bit colors (showing colors 160-171 as an example):
- Dimmed:      160  161  162  163  164  165  166  167  168  169  170  171 
- Foreground:  160  161  162  163  164  165  166  167  168  169  170  171 
- Background:  160  161  162  163  164  165  166  167  168  169  170  171 
- Reversed:    160  161  162  163  164  165  166  167  168  169  170  171 
 
24-bit colors (full RGB):
- Dimmed:      ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
- Foreground:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
- Background:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
- Reversed:    ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
 
Font styles:
- Default
- Bold
- Dimmed
- Italic
- Underline
- Reversed
- Strikethrough
ansi
  vite v5.0.0 dev server running at:
 
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
 
  ready in 125ms.
 
8:38:02 PM [vite] hmr update /src/App.jsx

Inline ANSI: > Local: http://localhost:3000/

Kitchen Sink Meta Strings

This should be highlight the meta strings, have some line numbers, and have a title and caption.

isEven.ts
function isEven(number) {
  if (number === 1) {
    return false;
  } else if (number === 2) {
    return true;
  } else if (number === 3) {
    return false;
  } else if (number === 4) {
    return true;
  } else if (number === 5) {
    return false;
  } else if (number === 6) {
    return true;
  } else if (number === 7) {
    return false;
  } else if (number === 8) {
    return true;
  } else if (number === 9) {
    return false;
  } else if (number === 10) {
    return true;
  } else {
    return "Number is not between 1 and 10.";
  }
}
Im a caption

Diff Highlighting

Show code changes with diff syntax highlighting. Lines starting with + are additions, - are deletions.

diff
- const oldFunction = () => {
-   return "old value";
- };
+ const newFunction = () => {
+   return "new value";
+ };
 
  // Unchanged context line
- import { oldModule } from "./old";
+ import { newModule } from "./new";

Shell/Bash Commands

Terminal
# Install dependencies
npm install
 
# Run development server
npm run dev
 
# Build for production
npm run build
sh
git clone https://github.com/user/repo.git
cd repo
npm install
zsh
git clone https://github.com/user/repo.git
cd repo
npm install

JSON with Highlighting

package.json
{
  "name": "my-app",
  "version": "1.0.0",
  "description": "My awesome app",
  "main": "index.js",
  "scripts": {
    "dev": "next dev",
    "build": "next build"
  }
}

CSS Example

css
:root {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
}
 
.button {
  background-color: var(--color-primary);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

JavaScript Example

js
const x = 10;

SQL Query

sql
SELECT users.name, orders.total
FROM users
INNER JOIN orders ON users.id = orders.user_id
WHERE orders.created_at > '2024-01-01'
ORDER BY orders.total DESC
LIMIT 10;

YAML Configuration

docker-compose.yml
version: '3.8'
services:
  web:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
  db:
    image: postgres:15
    volumes:
      - postgres_data:/var/lib/postgresql/data

Docker Configuration

dockerfile
FROM node:18-alpine
 
WORKDIR /app
 
COPY package*.json ./
 
RUN npm install
 
COPY . .
 
EXPOSE 3000
 
CMD ["npm", "run", "dev"]

CSV Example

csv
name,age,city
John,30,New York
Jane,25,Los Angeles

SQL Query

sql
SELECT users.name, orders.total
FROM users
INNER JOIN orders ON users.id = orders.user_id
WHERE orders.created_at > '2024-01-01'
ORDER BY orders.total DESC
LIMIT 10;

Java Example

java
public class Main {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

Golang Example

go
package main
 
import "fmt"
 
func main() {
    fmt.Println("Hello, World!")
}

Python Example

py
def hello_world():
    print("Hello, World!")

Ruby Example

rb
def hello_world
    puts "Hello, World!"
end

Vimscript Example

vim
function Hello()
    echo "Hello, World!"
endfunction

Lua Example

lua
function hello_world()
    print("Hello, World!")
end

Rust Example

rust
fn main() {
    println!("Hello, World!");
}

C# Example

cs
public class Main {
    public static void Main() {
        Console.WriteLine("Hello, World!");
    }
}

C++ Example

cpp
#include <iostream>
 
int main() {
    std::cout << "Hello, World!" << std::endl;
    return 0;
}

C Example

c
#include <stdio.h>
 
int main() {
    printf("Hello, World!\n");
    return 0;
}

Swift Example

swift
import Swift
 
print("Hello, World!")

Flutter Example

dart
void main() {
    print("Hello, World!");
}

XML Example

xml
<?xml version="1.0" encoding="UTF-8"?>
<root>
    <element>Hello, World!</element>
</root>

PHP Example

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

Blade Example

php
@php
    echo "Hello, World!";
@endphp

Kotlin Example

kotlin
fun main() {
    println("Hello, World!")
}

Group Highlighted Chars By Id

Place an id after # after the chars. This allows you to color chars differently based on their id.

js
const [age, setAge] = useState(50);
const [name, setName] = useState("Taylor");

Styling: The chars <span> receives a data-chars-id="<id>" attribute to style via CSS.

Inline Diff Highlighting

You can mark lines as additions or deletions in any language using // [!code ++] or // [!code --].

tsx
function MyComponent() {
  return (
    <div>
      <h1>Hello World</h1>
      <p>Unchanged Line</p>
 
      <h1>Hello Next.js</h1>
 
      <p>Highlighted Line</p>
      <p>Focused Line</p>
    </div>
  );
}

Focused Lines

ts
console.log("not Focused")
console.log("focused 1")
console.log("focused 2")
console.log("not focused")

Error and Warning Lines

ts
console.log("Normal")
console.error("Error") 
console.warning("Warning")

Multiple Word Highlights

You can highlight multiple different words with different styles.

tsx
import React, { useState, useEffect } from 'react';
 
function Counter() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);
 
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Inline Code with Language

You can use inline code with specific language: const x = 10 or SELECT * FROM users

Nested Code Block

example.ts
```ts
interface User {
    name: string;
    age: number;
}
 
const user: User = {
    name: "John Doe",
    age: 30,
}
 
console.log(user);
```

The rendered result looks like this:

ts
interface User {
    name: string;
    age: number;
}
 
const user: User = {
    name: "John Doe",
    age: 30,
}
 
console.log(user);

Callout

Callout Type: Note with descriptionColor normal

Note

Hello I am a callout note

Callout Type: Tip

Tip

Hello I am a callout tip

Callout Type: Important

Important

Hello I am a callout important

Callout Type: Warning

Warning

Hello I am a callout warning

Callout Type: Caution

Caution

Hello I am a callout caution

Callout Type: Note with Title

Example Title

Hello I am a callout note with title

Callout Type: Tip with Inline Code

Tip

Hello I am a callout tip with inline code const x = 10

Callout Type: Important with Code Block

Important

Hello I am a callout important with code block

ts
console.log("Hello World");

Markdown Syntax Guide

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Basic Formatting

Bold Text

Bold Text and Bold Text

Italic Text

Italic Text and Italic Text

Bold and Italic Text

Bold and Italic

Strikethrough

Strikethrough

Inline Code

Inline Code

Blockquotes

This is a blockquote. It can span multiple lines.

Blockquotes can be nested...

...by using additional greater-than signs right next to each other...

...or with spaces between arrows.

Here an example blockquote with code block:

NOTE: Here is a note

tsx
const x = 10;

Lists

Unordered List

  • Item 1
  • Item 2
    • Subitem 2.1
    • Subitem 2.2
      • Sub-subitem 2.2.1
  • Item 3

Ordered List

  1. First Item
  2. Second Item
    1. Subitem 2.1
    2. Subitem 2.2
  3. Third Item

Task List

  • Completed task
  • Incomplete task
  • Another incomplete task

Tables

Header 1Header 2Header 3Header 4Header 5
Left-alignedCenter-alignedRight-alignedRight-alignedRight-aligned
Row 1, Col 1Row 1, Col 2Row 1, Col 3Row 1, Col 4Row 1, Col 5
Row 2, Col 1Row 2, Col 2Row 2, Col 3Row 2, Col 4Row 2, Col 5

Links and Images

External Link Internal Link

Placeholder Image

Horizontal Rule