Syntax Highlighting

mdxsyntax-highlighting

This post is to see all language and icon syntax highlighting

Example

Language

example.html
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>
example.css
body {
    color: #000;
}
example.js
console.log('Hello World');
example.ts
console.log('Hello World');
example.md
# Hello World
This is **bold** text.
example.mdx
# Hello World
<Component />
example.scss
// Testing Sass Icon
$primary-color: #CC6699;
body { color: $primary-color; }
example.css
/* Testing Tailwind Icon */
@tailwind base;
example.sh
# Testing Bash Icon
echo "Hello World"
example.py
def hello():
    print("Hello World")
main.go
package main
import "fmt"
func main() {
    fmt.Println("Hello World")
}
main.rs
fn main() {
    println!("Hello World");
}
Main.java
public class Main {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}
index.php
<?php
echo "Hello World";
?>
example.rb
puts "Hello World"
example.swift
print("Hello World")
example.kt
fun main() {
    println("Hello World")
}
example.dart
void main() {
  print('Hello World');
}
example.lua
print("Hello World")
example.xml
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>
example.cpp
// Testing Arduino Icon
void setup() {}
example.ino
// Testing Arduino Icon
void setup() {}
example.c
// Testing C Icon
void setup() {}
example.cs
// Testing C# Icon
void setup() {}

Framework

example.vue
// Testing Vue Icon
export default {
  name: 'VueComponent'
}
example.vue
// Testing Vue Icon
export default {
  name: 'VueComponent'
}
example.ts
// Testing Angular Icon
@Component({
  selector: 'app-root'
})
example.cs
// Testing .NET Icon
var builder = WebApplication.CreateBuilder(args);
example.blade.php
@if (count($records) === 1)
    I have one record!
@endif
main.dart
import 'package:flutter/material.dart';
 
void main() {
  runApp(const MyApp());
}

Database

example.sql
-- Testing PostgreSQL Icon
SELECT * FROM users;
example.prisma
generator client {
  provider = "prisma-client-js"
}
 
datasource db {
  provider          = "mysql"
  url               = env("DATABASE_URL") // NOTE: Please consider when using multiple environment (e.g. dev, staging, and production)
  shadowDatabaseUrl = env("SHADOW_DATABASE_URL")
}
 
model User {
  id           String     @id @default(uuid())
  fullName     String
  email        String     @unique
  gender       UserGender
  age          Int
  phoneNumber  String
  password     String
  refreshToken String?    @db.VarChar(512)
  createdAt    DateTime   @default(now())
  updatedAt    DateTime   @updatedAt
 
  role   Role   @relation(fields: [roleId], references: [id])
  roleId String
 
  profile Profile?
 
  UserChatRoom   ChatRoom[] @relation("UserChatRoom")
  ExpertChatRoom ChatRoom[] @relation("ExpertChatRoom")
 
  @@map("users")
}
example.sql
-- Testing MySQL Icon
SELECT * FROM users;
example.sql
-- Testing MySQL Icon
SELECT * FROM users;
example.sql
-- Testing MySQL Icon
SELECT * FROM users;
example.sql
-- Testing MySQL Icon
SELECT * FROM users;
redis.conf
bind 127.0.0.1 -::1 192.168.100.65
 
bind-source-addr 192.168.100.63
 
protected-mode yes
 
port 6379
mongodb.conf
bind 127.0.0.1 -::1 192.168.100.65
bind-source-addr 192.168.100.63
protected-mode yes
port 27017
example.js
// Testing Supabase Icon
const { data } = await supabase.from('test').select();

Infrastructure as Code (IaC)

example.tf
# Testing Terraform Icon
resource "aws_instance" "example" {}
example.tf
# Testing Terraform Icon
resource "aws_instance" "example" {}
example.yml
# Testing Ansible Icon (B&W Toggle)
- name: test playbook
  hosts: all
example.tf
resource "aws_s3_bucket" "demo_bucket" {
  # The bucket name is dynamically generated using the random_id resource
  bucket = "opentofu-demo-bucket-${random_id.bucket_id.hex}"
}
 
resource "random_id" "bucket_id" {
  byte_length = 8
}

Container

dockerfile
# --------
# 1. Builder
# --------
FROM oven/bun:1.2.23-alpine AS builder
 
# Add the link to your new repository here
LABEL org.opencontainers.image.source="https://github.com/username/velora"
 
WORKDIR /app
 
# Install dependencies using cached layer
COPY package.json bun.lock ./
RUN bun install --frozen-lockfile
 
# Copy all source
COPY . .
 
# Build Next.js
RUN bun run build
 
 
# --------
# 2. Runner
# --------
FROM oven/bun:1.2.23-alpine AS runner
 
WORKDIR /app
 
ENV NODE_ENV=production
ENV PORT=3000
 
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/static ./.next/static
 
EXPOSE 3000
 
CMD ["bun", "run", "server.js"]
docker-compose.yml
services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - PORT=3000
docker-compose.yml
services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - PORT=3000
example.yml
# Testing Kubernetes Icon
apiVersion: v1
kind: Pod
example.yml
# Testing Kubernetes Icon
apiVersion: v1
kind: Pod
example.yml
# Testing Argo Icon
apiVersion: v1
kind: Pod

CI/CD

.gitlab-ci.yml
workflow:
    rules:
        # MR pipelines
        - if: $CI_PIPELINE_SOURCE == "merge_request_event"
        # Branch/tag pipelines
        - if: $CI_PIPELINE_SOURCE == "push"
        # Default: skip
        - when: never
 
stages:
    - release
    - build
 
variables:
    GITLAB_TOKEN: $GITLAB_TOKEN
    CI_REGISTRY_USER: $CI_REGISTRY_USER
    CI_REGISTRY_PASSWORD: $CI_REGISTRY_PASSWORD
    CI_REGISTRY: $CI_REGISTRY
    GIT_DEPTH: 100
.github/workflows/pr-build.yml
name: PR Build & Test
 
on:
  pull_request:
    branches:
      - staging
      - main
    types:
      - opened
      - synchronize
      - reopened
 
jobs:
  build-and-test:
    name: Build and Test
    runs-on: ubuntu-latest
    environment: ${{ github.base_ref }}
 
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

Configuration

nginx.conf
# Testing Nginx Icon
server {
    listen 80;
}
rabbitmq.conf
###--- MANAGEMENT CONFIGURATION ---####
#management.listener.ip = 127.0.0.1
management.listener.ssl = true
management.listener.port = 15672
kafka.properties
# server.properties Example
broker.id=0
listeners=PLAINTEXT://:9092
log.dirs=/var/lib/kafka/data
num.partitions=3
auto.create.topics.enable=true
zookeeper.connect=localhost:2181

Utility

example.sh
# Testing Git Icon
git commit -m "Test icon"
example.sh
# Testing GitHub Icon (B&W Toggle)
ssh -T git@github.com
example.ts
# Testing GraphQL Icon
query { user { id } }
npm i <package_name>
example.csv
name,age,city
John,30,New York
Jane,25,Los Angeles
example.diff
- const a = 1;
+ const a = 2;
.vimrc
set number
syntax on

Related Posts