CCM

Back

site.css
.flex {
display: flex;
}
// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')
5 collapsed lines
// All this boilerplate setup code will be collapsed
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
const engine = someBoilerplateEngine(evenMoreBoilerplate())
// This part of the code will be visible by default
engine.doSomething(1, 2, 3, calcFn)
function calcFn() {
// You can have multiple collapsed sections
3 collapsed lines
const a = 1
const b = 2
const c = a + b
// This will remain visible
console.log(`Calculation result: ${a} + ${b} = ${c}`)
return c
}
4 collapsed lines
// All this code until the end of the block will be collapsed again
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: 'End of example boilerplate code' })
// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"
labeled-line-markers.jsx
<button
role="button"
{...props}
value={value}
className={buttonClassName}
disabled={disabled}
active={active}
>
{children &&
!active &&
(typeof children === 'string' ? <span>{children}</span> : children)}
</button>
// This code block will show line numbers
console.log('Greetings from line 2!')
console.log('I am on line 3')
// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')
// Line numbers are disabled for this block
console.log('Hello?')
console.log('Sorry, do you know what line I am on?')

baidu
gg
bili
x
deepseek
npm
baidu
local
site

site.css
.flex {
display: flex;
}
site.css
.flex {
display: flex;
}
site
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
site
name: HelloWorld
description: A simple Java program
version: 1.0.0
mainClass: HelloWorld
dependencies:
- java: 11
Terminal window
fatal: refusing to merge unrelated histories
zig code
const std = @import("std");
test "hello world test" {
std.debug.print("Hello, test!\n", .{});
try std.testing.expect(true);
}
site.json
{
"name": "HelloWorld",
"description": "A simple Java program",
"version": "1.0.0",
"mainClass": "HelloWorld",
"dependencies": {
"java": "11"
}
}
site.py
def hello_world():
print("Hello, World!")
labeled-line-markers.jsx
<button
role="button"
{...props}
value={value}
className={buttonClassName}
disabled={disabled}
active={active}
>
{children &&
!active &&
(typeof children === 'string' ? <span>{children}</span> : children)}
</button>
Terminal window
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
.gitignore
.starlight-icons/*
!.starlight-icons/safelist.json
app.ts
console.log('hi')
`catcodeme`: generate by signature.cnrad.dev, animation by Claude AI
Test: code highlight by expressive-code
https://8cat.life/blog/t3.html
catcodeme Author catcodeme
Published at August 12, 2025