Logo
文章 项目 照片

专门测试Litos主题支持的代码块功能，包括语法高亮、行号、高亮行、代码编辑器框架、终端框架等。

测试文章：代码块功能测试
6 mins
1191 words
Loading views
测试代码块语法高亮

代码块功能测试h1

这篇文章专门测试Litos主题支持的代码块功能。

1. 语法高亮测试h2

1.1 JavaScripth3

// JavaScript 示例
function greet(name) {
  return `Hello, ${name}!`
}


const message = greet('World')
console.log(message)

1.2 TypeScripth3

// TypeScript 示例
interface User {
  id: number
  name: string
  email: string
}


function getUser(id: number): User {
  return {
    id,
    name: 'Test User',
    email: 'test@example.com',
  }
}

1.3 Pythonh3

# Python 示例
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)


# 打印前 10 个斐波那契数
for i in range(10):
    print(fibonacci(i))

1.4 Javah3

// Java 示例
public class Fibonacci {
    public static int fibonacci(int n) {
        if (n <= 1) {
            return n;
        }
        return fibonacci(n-1) + fibonacci(n-2);
    }


    public static void main(String[] args) {
        // 打印前 10 个斐波那契数
        for (int i = 0; i < 10; i++) {
            System.out.println(fibonacci(i));
        }
    }
}

1.5 CSSh3

/* CSS 示例 */
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
}


.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}


.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}


.button:hover {
  background-color: #2980b9;
}

1.6 HTMLh3

<!-- HTML 示例 -->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试页面</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <h1>Hello, World!</h1>
      <p>这是一个测试页面。</p>
      <button class="button">点击我</button>
    </div>
    <script src="script.js"></script>
  </body>
</html>

2. 代码编辑器框架测试h2

2.1 带标题的代码块h3

hello.js
console.log('Hello, World!')

2.2 带文件路径的代码块h3

src/utils/helpers.ts
function formatDate(date: Date): string {
  return date.toLocaleDateString('zh-CN')
}

3. 终端框架测试h2

3.1 Bash 终端h3

Terminal window
echo "Hello, Terminal!"
cd /path/to/directory
ls -la
npm install

3.2 PowerShell 终端h3

PowerShell 示例
Write-Output "Hello, PowerShell!"
Get-Process
Get-ChildItem

4. 行高亮测试h2

4.1 高亮单行h3

function highlight() {
  console.log('这行被高亮')
  const a = 1
  const b = 2
  const c = a + b
}

4.2 高亮多行h3

function highlight() {
  console.log('这行被高亮')
  const a = 1
  const b = 2
  const c = a + b
  console.log(c)
}

4.3 行标记类型测试h3

line-markers.js
function demo() {
  console.log('this line is marked as deleted')
  // This line and the next one are marked as inserted
  console.log('this is the second inserted line')


  return 'this line uses the neutral default marker type'
}

5. 行号测试h2

5.1 显示行号h3

// 这行是第 1 行
console.log('这行是第 2 行')
console.log('这行是第 3 行')

5.2 禁用行号h3

// 行号被禁用
console.log('这行没有行号')
console.log('这行也没有行号')

5.3 自定义起始行号h3

// 这行显示为第 5 行
console.log('这行显示为第 6 行')
console.log('这行显示为第 7 行')

6. 代码折叠测试h2

5 collapsed lines
// 这些代码会被折叠
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'


const engine = someBoilerplateEngine(evenMoreBoilerplate())


// 这段代码会默认显示
engine.doSomething(1, 2, 3, calcFn)


function calcFn() {
  // 可以有多个折叠区域
3 collapsed lines
  const a = 1
  const b = 2
  const c = a + b


  // 这部分会保持可见
  console.log(`计算结果: ${a} + ${b} = ${c}`)
  return c
}


4 collapsed lines
// 从这里到结束的代码会再次折叠
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: '示例代码结束' })

7. 单词换行测试h2

7.1 启用单词换行h3

// 示例：启用单词换行
function getLongString() {
  return '这是一个非常长的字符串，它很可能无法适应可用空间，除非容器非常宽。这是为了测试代码块的单词换行功能。'
}

7.2 禁用单词换行h3

// 示例：禁用单词换行
function getLongString() {
  return '这是一个非常长的字符串，它很可能无法适应可用空间，除非容器非常宽。这是为了测试代码块的单词换行功能。'
}

8. 差异对比测试h2

8.1 基础差异h3

这行将被标记为插入
这行将被标记为删除
这是普通行

8.2 带语法高亮的差异h3

function thisIsJavaScript() {
  // 整个块会被高亮为 JavaScript
  // 我们仍然可以添加差异标记
  console.log('要删除的旧代码')
  console.log('新的闪亮代码！')
}

9. 内联文本标记测试h2

9.1 纯文本搜索h3

// 纯文本搜索字符串
function demo() {
  // 标记行内的任何给定文本
  return '支持给定文本的多个匹配项'
}

9.2 正则表达式h3

// 正则表达式
console.log('单词 yes 和 yep 将被标记。')

10. ANSI 颜色测试h2

ansi-colors.md
ANSI 颜色：
- 普通： 红色 绿色 黄色 蓝色 紫色 青色
- 加粗： 红色 绿色 黄色 蓝色 紫色 青色
- 暗淡： 红色 绿色 黄色 蓝色 紫色 青色


文本格式： 加粗 暗淡 斜体 下划线

代码块测试总结h2

这篇文章测试了Litos主题支持的所有代码块功能：

  • 语法高亮（多种语言）
  • 代码编辑器框架
  • 终端框架
  • 行高亮
  • 行标记类型（删除、插入、默认）
  • 行号显示/隐藏/自定义起始行号
  • 代码折叠
  • 单词换行
  • 差异对比
  • 内联文本标记
  • ANSI颜色支持

这些功能为开发者提供了强大的代码展示能力，使博客文章中的代码更加易读和美观。

评论