Shiki：代码语法高亮

Shiki：代码语法高亮

  1. 程序开发
  2. 2 months ago
  3. 3 min read

Shiki是一个用于代码语法高亮的JavaScript库，它的特点是：

  • 支持多种编程语言
  • 渲染效果精确、美观
  • 轻量级，性能优秀

shiki已经通过与unified(remark和rehype)生态集成实现了markdown的代码块高亮，知名框架Astro已经内置了shiki代码语法高亮的支持。

通用编程语言

汇编

global  go
extern  _ExitProcess@4
extern  _GetStdHandle@4
extern  _WriteConsoleA@20

section .data
msg:    db      'Hello, World', 10
handle: db      0
written:
db      0

section .text
go:
; handle = GetStdHandle(-11)
push    dword -11
call    _GetStdHandle@4
mov     [handle], eax

; WriteConsole(handle, &msg[0], 13, &written, 0)
push    dword 0
push    written
push    dword 13
push    msg
push    dword [handle]
call    _WriteConsoleA@20

; ExitProcess(0)
push    dword 0
call    _ExitProcess@4

Rust

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

C#

Console.WriteLine("Hello, World!");

Typescript

console.log("Hello, World!");

Python

print("Hello, World!")

C

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

C++

#include <iostream>
int main()
{
    std::cout << "Hello World!";
}

Go

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

Java

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

JavaScript

console.log("Hello, World!");

Kotlin

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

Swift

print("Hello, World!")

Scala

object HelloWorld
{
    def main(args: Array[String]): Unit =
    {
        println("Hello, World!")
    }
}

Visual Basic

Module HelloWorld
    Sub Main()
        Console.WriteLine("Hello, World!")
    End Sub
End Module

Pascal

program HelloWorld;
begin
    writeln('Hello, World!');
end.

Fortran

program HelloWorld
    print *, "Hello, World!"
end program HelloWorld

Haskell

main = putStrLn "Hello, World!"

Erlang

main() -> io:format("Hello, World!~n").

Lua

print("Hello, World!")

专用编程语言

Docker

FROM alpine:latest
CMD echo "Hello, World!"

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Hello, World!</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

CSS

body
{
    background-color: #f0f0f0;
    color: #333;
}

SQL

SELECT * FROM users WHERE name = 'Alice';

GraphQL

query {
    user(id: 1) {
        name
        age
    }
}

Shell

#!/bin/bash
echo "Hello, World!"

PowerShell

Write-Host "Hello, World!"

TeX

\documentclass{article}
\begin{document}
Hello, World!
\end{document}

Solidity

pragma solidity ^0.8.0;
contract HelloWorld
{
    function sayHello() public pure returns (string memory)
    {
        return "Hello, World!";
    }
}

Verilog

module HelloWorld;
initial
begin
    $display("Hello, World!");
    $finish;
end
endmodule

VHDL

entity T01_HelloWorldTb is
end entity;
  
architecture sim of T01_HelloWorldTb is
begin
  
    process is
    begin
  
        report "Hello World!";
        wait;
  
    end process;
  
end architecture;

数据

.env

NAME=Alice
AGE=20

JSON

{
    "name": "Alice",
    "age": 20
}

YAML

name: Alice
age: 20

TOML

name = "Alice"
age = 20

XML

<data>
    <to>Alice</to>
    <from>Bob</from>
</data>

INI

[info]
name = Alice
age = 20

CSV

name,age
Alice,20
Bob,21

Markdown

# Hello, World!

This is a **markdown** document.
| Name | Age |
| :-- | --: |
| Alice | 20 |
| Bob | 21 |

其它

改动比较

@@ -1,4 +1,4 @@
-import rehypeKatex from 'rehype-katex'
+import rehypeMathjax from 'rehype-mathjax'
 import rehypeStringify from 'rehype-stringify'
 import remarkMath from 'remark-math'
 import remarkParse from 'remark-parse'
@@ -10,7 +10,7 @@ const file = await unified()
   .use(remarkParse)
   .use(remarkMath)
   .use(remarkRehype)
-  .use(rehypeKatex)
+  .use(rehypeMathjax)
   .use(rehypeStringify)
   .process(await read('example.md'))
dev doc markdown shiki