Clina's Blog

自由软件之输入法————手机篇

Sat, 07 Mar 2026 00:00:00 GMT

本篇文章将介绍几款自由的手机输入法。

Android

同文输入法 (Trime)

::github{repo="osfans/trime"}

下载链接： <img alt='Get it on F-Droid' src='https://fdroid.gitlab.io/artwork/badge/get-it-on.png' width="207" height="80"/> <img src="https://github.com/rubenpgrady/get-it-on-github/raw/refs/heads/main/get-it-on-github.png" alt="Get it on GitHub" width="207" height="80">

小企鹅输入法 (Fcitx 5 For Android)

::github{repo="fcitx5-android/fcitx5-android"}

语燕输入法 (YuyanIME)

::github{repo="gurecn/YuyanIme"}

下载链接： <img src="https://github.com/rubenpgrady/get-it-on-github/raw/refs/heads/main/get-it-on-github.png" alt="Get it on GitHub" width="207" height="80">

iOS

Fcitx 5 For iOS

::github{repo="fcitx-contrib/fcitx5-ios"}

需要侧载安装。

Harmony OS

小企鹅输入法鸿蒙版 (Fcitx 5 For Harmony OS)

::github{repo="fcitx-contrib/fcitx5-harmony"}

下载链接： <img src="https://github.com/rubenpgrady/get-it-on-github/raw/refs/heads/main/get-it-on-github.png" alt="Git it on GitHub" width="207" height="80"> 同样需要侧载安装。

postmarket OS / Ubuntu Touch / Mobian / Pure OS

输入法安装方式与 GNU/Linux 相同，这里不再详细讲解。

为自己的脚本语言编写VSCode支持扩展：从零到发布完整指南

Fri, 02 Jan 2026 00:00:00 GMT

为自己的脚本语言编写VSCode支持扩展：从零到发布完整指南

作者：colaSensei | 发布时间：2026年1月

最近我为自己设计的游戏脚本语言PGNCode开发了VSCode扩展，过程中积累了不少经验。如果你也有自己的DSL（领域特定语言）或脚本语言，这篇文章将带你完整走过为它创建VSCode扩展的每一个步骤。

为什么需要为自定义语言开发VSCode扩展？

在我开发PaperVisualNovel引擎时，设计了PGNCode脚本语言。编写游戏需要编辑.pgn文件，但遇到了一些问题：

没有语法高亮：所有文本都是同一个颜色，难以区分命令、变量和注释
没有代码提示：需要记忆所有命令和参数格式
没有错误检查：语法错误只能在运行时发现
开发体验差：缺少现代IDE应有的功能

这些问题严重影响了开发效率。于是，我决定为PGNCode创建VSCode扩展。

准备工作

技术栈需求

Node.js (>= 14.x)（这个应该都有吧）
Visual Studio Code (用于开发和测试，这个不可能没有吧)
基础的前端知识 (JSON, 正则表达式)

开发工具

# 安装VSCode扩展开发工具
npm install -g yo generator-code

第一步：创建扩展项目

使用官方生成器创建基础项目：

# 创建项目目录
mkdir my-language-extension
cd my-language-extension

# 运行生成器
yo code

在交互式界面中选择：

New Language Support (新语言支持)
输入扩展名称、描述
指定语言ID、文件扩展名

这会生成一个基础的项目结构。

第二步：理解项目结构

生成的项目包含以下核心文件：

my-language-extension/
├── package.json              # 扩展清单
├── syntaxes/
│   └── language.tmLanguage.json # 语法定义
├── language-configuration.json  # 语言配置
└── README.md                 # 说明文档

1. package.json - 扩展清单

这是扩展的"身份证"，定义了扩展的基本信息和功能。

{
    "name": "my-language-support",
    "displayName": "My Language Support",
    "description": "Syntax highlighting for My Language",
    "version": "1.0.0",
    "publisher": "your-name",
    "engines": { "vscode": "^1.75.0" },
    "categories": ["Programming Languages"],
    "contributes": {
        "languages": [{
            "id": "mylang",
            "aliases": ["My Language", "mylang"],
            "extensions": [".mylang", ".ml"],
            "configuration": "./language-configuration.json"
        }],
        "grammars": [{
            "language": "mylang",
            "scopeName": "source.mylang",
            "path": "./syntaxes/mylang.tmLanguage.json"
        }]
    }
}

2. 语法定义文件 (TextMate语法)

这是最核心的部分，定义了如何高亮代码。VSCode使用TextMate语法系统。

{
    "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
    "scopeName": "source.mylang",
    "patterns": [
        {
            "name": "comment.line.mylang",
            "match": "//.*"
        },
        {
            "name": "keyword.control.mylang",
            "match": "\\b(if|else|while|for|return)\\b"
        },
        {
            "name": "constant.numeric.mylang",
            "match": "\\b\\d+(\\.\\d+)?\\b"
        }
    ]
}

关键概念：

scopeName: 语法的根作用域
patterns: 匹配规则数组
name: 作用域名称，决定高亮颜色
match: 正则表达式匹配模式

3. 语言配置文件

定义语言的编辑特性：

{
    "comments": {
        "lineComment": "//",
        "blockComment": ["/*", "*/"]
    },
    "brackets": [
        ["{", "}"],
        ["[", "]"],
        ["(", ")"]
    ],
    "autoClosingPairs": [
        { "open": "{", "close": "}" },
        { "open": "[", "close": "]" },
        { "open": "(", "close": ")" },
        { "open": "\"", "close": "\"" }
    ],
    "indentationRules": {
        "increaseIndentPattern": "^.*\\{[^}\"]*$|^.*\\([^)\"]*$",
        "decreaseIndentPattern": "^\\s*\\}|^\\s*\\)"
    }
}

第三步：设计语法高亮规则

分析语言特性

以我的PGNCode为例，我需要识别：

注释：// 这是注释
命令：say, wait, set, if 等
变量：${variable} 格式
数字：整数和小数
字符串：引号内的文本
标签：LABEL_NAME: 格式

编写匹配规则

{
    "scopeName": "source.pgn",
    "patterns": [
        // 注释
        {
            "name": "comment.line.double-slash.pgn",
            "match": "//.*"
        },

        // 命令（小心处理边界）
        {
            "name": "keyword.control.pgn",
            "match": "(?<!\\$\\{)\\b(say|wait|set|if|choose)\\b(?!\\})"
        },

        // 变量引用
        {
            "name": "variable.parameter.pgn",
            "begin": "\\$\\{",
            "end": "\\}",
            "patterns": [
                {
                    "name": "variable.other.pgn",
                    "match": "[a-zA-Z_][a-zA-Z0-9_]*"
                }
            ]
        },

        // 标签定义（行首的单词后跟冒号）
        {
            "name": "entity.name.tag.pgn",
            "match": "^\\s*[A-Za-z_][A-Za-z0-9_]*:"
        }
    ]
}

技巧：

使用begin/end处理嵌套结构
使用负向零宽断言避免错误匹配
从简单规则开始，逐步完善

第四步：添加代码片段

代码片段可以极大提高编码效率：

{
    "If Command": {
        "prefix": ["if", "IF"],
        "body": [
            "if ${1:variable} ${2|==,!=,>,<,>=,<=|} ${3:value} ${4:LABEL_NAME}"
        ],
        "description": "Conditional jump"
    },
    "Say Command": {
        "prefix": "say",
        "body": [
            "say ${1:text} ${2:0.5} ${3|white,black,blue,green,red,yellow|}"
        ],
        "description": "Display text with typing effect"
    }
}

特性：

prefix: 触发补全的文本
body: 插入的代码，支持占位符${n:default}
选择列表：${1|option1,option2|}
变量：${TM_FILENAME}等内置变量

第五步：本地测试

启动调试

在VSCode中打开扩展项目
按 F5 启动扩展开发主机
在新窗口中创建测试文件
验证语法高亮和代码片段

常见问题调试

问题1：语法高亮不工作

检查.tmLanguage.json格式
验证正则表达式是否正确
检查文件扩展名关联

问题2：代码片段不出现

检查snippets/*.json文件格式
确认snippet的language字段正确
重启扩展主机

问题3：扩展无法激活

检查package.json中的activationEvents
查看"输出"面板的"扩展主机"日志

第六步：高级功能

1. 添加命令和配置

{
    "contributes": {
        "commands": [{
            "command": "mylang.formatDocument",
            "title": "Format MyLang Document"
        }],
        "configuration": {
            "title": "My Language",
            "properties": {
                "mylang.enableSyntaxHighlighting": {
                    "type": "boolean",
                    "default": true,
                    "description": "Enable syntax highlighting"
                }
            }
        }
    },
    "activationEvents": [
        "onLanguage:mylang",
        "onCommand:mylang.formatDocument"
    ]
}

2. 创建语言服务器（可选）

对于复杂的语言功能（代码补全、诊断、跳转定义），可以考虑实现Language Server：

// 创建Language Server
import * as vscode from 'vscode';
import * as lsp from 'vscode-languageclient';

export function activate(context: vscode.ExtensionContext) {
    const serverOptions: lsp.ServerOptions = {
        command: 'node',
        args: [context.asAbsolutePath('server/server.js')]
    };

    const clientOptions: lsp.LanguageClientOptions = {
        documentSelector: [{ scheme: 'file', language: 'mylang' }]
    };

    const client = new lsp.LanguageClient(
        'mylangServer',
        'My Language Server',
        serverOptions,
        clientOptions
    );

    client.start();
}

第七步：打包和发布

1. 安装打包工具

npm install -g @vscode/vsce

2. 准备发布

# 更新版本号
# 完善README.md
# 添加LICENSE
# 更新CHANGELOG.md

3. 打包

vsce package
# 生成: my-language-support-1.0.0.vsix

4. 发布到市场

方法A：直接发布

vsce publish
# 需要发布者令牌

方法B：手动上传

访问 VS Code Marketplace
点击"上传扩展"
选择生成的.vsix文件

第八步：持续维护

监控反馈

关注GitHub Issues
查看市场评价
收集用户需求

版本更新流程

修改代码
更新版本号
更新CHANGELOG
测试
打包
发布

最佳实践

渐进增强：先实现语法高亮，再逐步添加高级功能
测试驱动：为每个功能创建测试用例
文档完善：清晰的README和注释
性能优化：避免复杂的正则表达式
向后兼容：谨慎修改现有功能

实战经验分享

踩过的坑

正则表达式性能问题

// 错误：过于复杂的正则
"match": "\\b(say|wait|show|end|set|random|jump|if|choose|endname|SAY|WAIT|SHOW|END|SET|RANDOM|JUMP|IF|CHOOSE|ENDNAME)\\b"

// 优化：使用忽略大小写标志
"match": "(?i)\\b(say|wait|show|end|set|random|jump|if|choose|endname)\\b"

作用域冲突

// 变量引用内部的文本不应该被当作命令高亮
// 错误：${say} 中的 "say" 被高亮为命令
// 解决：在命令匹配中使用负向零宽断言
"match": "(?<!\\$\\{)\\b(say|wait|set)\\b(?!\\})"

效率技巧

使用开发工具：
- TextMate Grammar Tester
- Scope Inspector

模板化开发：

// 自动生成代码片段的脚本
const commands = [
    { name: 'say', desc: 'Display text' },
    { name: 'set', desc: 'Set variable' }
];

const snippets = {};
commands.forEach(cmd => {
    snippets[cmd.name] = {
        prefix: cmd.name,
        body: [`${cmd.name} \${1:placeholder}`],
        description: cmd.desc
    };
});

测试用例：创建测试文件覆盖所有语法特性：

test-cases.mylang
├── 注释测试
├── 命令测试
├── 变量测试
└── 边界情况测试

成果展示

完成扩展后，我的PGNCode开发体验得到了极大改善：

之前：

纯文本编辑
需要查手册
运行时才发现错误

之后：

彩色语法高亮
智能代码补全
实时错误提示
开发效率提升300%（哈哈）

资源推荐

官方文档：VSCode Extension API
示例项目：VSCode Extension Samples
语法参考：TextMate Language Grammars
正则测试：Regex101

结语

为自己的脚本语言开发VSCode扩展是一项很有价值的工作。它不仅提升了开发体验，也让你的语言看起来更加"专业"。整个过程虽然有些技术细节需要处理，但收获的成就感是巨大的。

关键点回顾：

从简单的语法高亮开始
逐步添加代码片段、配置等高级功能
充分测试，特别关注边界情况
文档完善，便于他人使用
持续维护，响应用户反馈

希望这篇文章能帮助你也为自己的语言创建出色的开发工具。

如何将你的Fuwari博客部署到Codeberg Pages (Forgejo Actions版)

Sun, 28 Dec 2025 00:00:00 GMT

Codeberg Pages 是 Codeberg 官方提供的一个静态网站托管平台，类似于 Github Pages. 今天我们就要将Fuwari博客部署到Codeberg Pages , 使用 Forgejo Actions. 首先，在仓库中点击设置，点击仓库功能 / 概览，打开 Actions，保存设置。 接下来，回到仓库，在仓库根目录新建.forgejo/workflows文件夹. 在文件夹中添加 astro.yml 文件，内容如下：

name: Deploy Astro site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches:
      # If you want to build from a different branch, change it here.
      - main
  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

jobs:
  build:
    # You can find the list of available runners on https://codeberg.org/actions/meta, or run one yourself.
    runs-on: codeberg-medium-lazy
    steps:
      - name: Clone the repository
        uses: https://code.forgejo.org/actions/checkout@v4
        with:
          submodules: recursive
          fetch-depth: 0
      - name: check .domains files
        run: |
          git ls-files public/.domains
          ls -la public/
          ls -la public/.domains || echo ".domains not found"
      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 10
      - name: Setup Node.js
        uses: https://code.forgejo.org/actions/setup-node@v4
        with:
          node-version: 22
          cache: 'pnpm'
      - name: Install dependencies
        run: |
          pnpm install
          pnpm install @astrojs/sitemap
      - name: Build Astro site
        run: pnpm run build

      - name: Upload generated files
        uses: https://code.forgejo.org/actions/upload-artifact@v3
        with:
          name: Generated files
          path: dist/
          include-hidden-files: true
      
  deploy:
    needs: [ build ]
    runs-on: codeberg-tiny-lazy
    steps:
      - name: Clone the repository
        uses: https://code.forgejo.org/actions/checkout@v4
        with:
          submodules: recursive
          fetch-depth: 0

      - name: Checkout the target branch and clean it up
        run: |
          git checkout pages || git switch --orphan pages
          rm -Rfv $(ls -A | egrep -v '^(\.git|LICENSE)$')

      - name: Download generated files
        uses: https://code.forgejo.org/actions/download-artifact@v3
        with:
          name: Generated files

      - name: Publish the website
        run: |
          git config user.email codeberg-ci
          git config user.name "Codeberg CI"
          echo "=== Files being committed ==="
          ls -la
          git add .
          git commit --allow-empty --message "Codeberg build for ${GITHUB_SHA}"
          git push origin pages

然后，就可以愉快的在Codeberg Pages上部署Fuwari博客了！

FreeDomainOne 域名注册教程

Fri, 14 Nov 2025 00:00:00 GMT

今天推荐的是 FreeDomainOne 的免费域名，他们提供了publicvm.com,run.place,linkpc.net和work.gd后缀的域名. 首先，进入他们的官网：https://freedomain.one/; 接下来，注册一个账户,并点击发过来的验证邮件里的链接; 然后，回到他们的官网，输入你想要的域名前缀并选择域名后缀，完成后点击Check Availability,检查域名是否可用； 如果可用,点击Claim This Name >>按钮,进入付款页面; 进入付款页面后,保持默认设置,点击SUBMIT >>按钮,注册完成.注意,要记住 Free renew after 后面的日期,以后有用.

注意：注册的域名必须在 Free renew after 后面的日期以后一个月内续期，否则域名会被删除.

教程至此结束. 补充：推荐使用https://www.emailtick.com/ 的临时邮箱注册,因为当你输错用户名和密码时，这个网站会把使用这个用户名的用户注册时用的邮箱直接显示出来,有安全风险.

osfc.org.cn && osfs.top 域名注册教程

Fri, 14 Nov 2025 00:00:00 GMT

如题，今天讲的是这两个域名的注册教程，暂时都无法托管到 Cloudflare. 官网地址：https://registry.osfc.org.cn 我的邀请链接：https://registry.osfc.org.cn/register?invite=286 推荐使用邀请链接，因为那样你可以拿到20Points 奖励 第一步，使用上面两个链接的其中一个，进入官网. 第二步，在右上角找到 Sign up 按钮，并点击，注册一个账号. 第三步，进入仪表板，点+号添加一个域名. 注意，创建一个域名需花费50Points,而注册时会送100Points，也就是可以注册2个域名 这个域名无法修改 NS 服务器（也许吧），暂时不推荐用作主力域名，只推荐玩一玩.

ZoneABC 域名注册教程

Fri, 14 Nov 2025 00:00:00 GMT

如题，今天讲一下 ZoneABC 域名的注册教程. ZoneABC 提供了webn.cc,zabc.net,sylu.cc,sylu.net,acg.rest,vvvv.ee和ctrl.li后缀的域名. 官网：https://zoneabc.net/ 邀请链接：https://zoneabc.net/register?invite=cd9373abf598410ea2294f47a1db8d6d 第一步，点击上面两个链接中的其中一个，进入注册界面，推荐使用邀请链接注册，那样你可以获得额外的10积分. 第二步，注册好账户后，进入面板，注册一个域名.注意，一些前缀比较短的域名会需要积分，经过测试，前缀长度为7及以上的域名无需积分，如果有错误请指正 这个域名比 osfc.org.cn 良心一点，但 DNS 记录只可添加20条，适合做备用.

PublicFreeSuffix 域名申请教程

Wed, 01 Oct 2025 00:00:00 GMT

如题，此帖讲的是 PublicFreeSuffix 免费域名的申请教程. 首先，打开他们的 GitHub 仓库地址： https://github.com/PublicFreeSuffix/PublicFreeSuffix 他们提供了pfsdns.org,nastu.net,tun.re,6ti.net和no.kg后缀的免费域名,都无法托管到 Cloudflare. 注册域名步骤： 第一步，fork 他们的 GitHub 仓库. 第二步，打开你 fork 的仓库，在 whois 文件夹里新建一个 json 文件，文件名为你想注册的域名.no.kg.json. 这里使用 no.kg 的域名后缀作为演示，如果想使用其他域名后缀，请把 no.kg 改为你想使用的域名后缀. json 文件格式：

{
  "registrant": "一个可以发邮件的邮箱",
  "domain": "域名名字",
  "sld": "域名后缀",
  "nameservers": [
    "NS 服务器1",
    "NS 服务器2",
    "NS 服务器3",
    "NS 服务器4"
  ],
  "agree_to_agreements": {
    "registration_and_use_agreement": true,
    "acceptable_use_policy": true,
    "privacy_policy": true
  }
}

第三步，在你 fork 的仓库里把这个提交创建为一个新分支，名字为域名全称-request-1. 注意：第几次更改就填数字几 第四步，向官方仓库发起一个拉取请求，标题为Registration/Update/Remove: 域名名字.域名后缀 内容这样填写：

> All items should be completed and confirmed to trigger the automatic merge workflow.

## Operation Type
- [x] Registration, Register a new domain name.
- [ ] Update, Update NS information or registrant email for an existing domain.
- [ ] Remove, Cancel my domain name.

## Domain
- [x] 域名名字.域名后缀

## Confirmation Items
- [x] I confirm that I will deploy the website content for this domain name and put it into use within 30 days instead of hoarding and occupying resources.
- [x] I confirm that the title of this Pull Request and the submitted files are in the standard format; otherwise, it will not be processed automatically.
- [x] I confirmed that the name in the whois file meets the standards.
- [x] I confirm that the domain name is at least 3 characters.
- [x] I confirm that I have read and understood the [Acceptable Use Policy](https://github.com/PublicFreeSuffix/PublicFreeSuffix/blob/main/agreements/acceptable-use-policy.md).
- [x] I confirm that I have read and agree to the [Privacy Policy](https://github.com/PublicFreeSuffix/PublicFreeSuffix/blob/main/agreements/privacy-policy.md).
- [x] I confirm that I have read and agree to the [Registration And Use Agreement](https://github.com/PublicFreeSuffix/PublicFreeSuffix/blob/main/agreements/registration-and-use-agreement-sokg.md).
- [x] I confirm that the domain does not contain any reserved terms from the [Reserved Words List](https://github.com/PublicFreeSuffix/PublicFreeSuffix/blob/main/reserved_words.txt).
- [x] I confirm that I will complete the registrant's email verification according to [ARAE Instructions](https://github.com/PublicFreeSuffix/PublicFreeSuffix/blob/main/AUTHORIZATION.md) to complete the merger.

如果是更新或删除，就把代码中 Registration 前面中括号里的 x 放在 Update/Remove 前面的中括号里. 第五步：当拉取请求状态为 validation-passed 后，用你刚才在 json 文件中填写的邮箱向 pr-authorization@publicfreesuffix.org发送一封邮件，标题为APPROVE_PFS_PR_你的拉取请求 ID，内容随便写. 第六步，到你的 DNS 提供商里添加域名. 至此申请结束.

Image Captions Example

Thu, 13 Mar 2025 00:00:00 GMT

About Image Captions

This feature wraps images in a <figure> tag only when the image carries independent meaning. If the image is part of the content and does not stand alone, it will not be enclosed in a <figure> tag. Only CommonMark syntax is supported.

Usage

Single Image

With Caption

Markdown:

![A description of the image](url "An image title")

HTML:

<figure>
  <div>
    <figure>
      <img alt="A description of the image" src="url">
      <figcaption>An image title</figcaption>
    </figure>
  </div>
</figure>

Without Caption

Markdown:

![A description of the image](url)

HTML:

<figure>
  <div>
    <img alt="A description of the image" src="url">
  </div>
</figure>

Multiple Images

When you include only images within a paragraph, they will be grouped together. Hard or soft breaks can also be used.

With Caption

Markdown:

![Image 1 description](url1 "Image Title 1")  
![Image 2 description](url2 "Image Title 2")

HTML:

<figure>
  <div>
    <figure>
      <img alt="Image 1 description" src="url1">
      <figcaption>Image Title 1</figcaption>
    </figure>
    <figure>
      <img alt="Image 2 description" src="url2">
      <figcaption>Image Title 2</figcaption>
    </figure>
  </div>
</figure>

Without Caption

Markdown:

![Image 1 description](url1)  
![Image 2 description](url2)

HTML:

<figure>
  <div>
    <img alt="Image 1 description" src="url1">
    <img alt="Image 2 description" src="url2">
  </div>
</figure>

With Shared Caption

Markdown:

![Image 1 description](url1 "This becomes the caption")  
![Image 2 description](url2)

HTML:

<figure>
  <div>
    <img alt="Image 1 description" src="url1">
    <img alt="Image 2 description" src="url2">
  </div>
  <figcaption>This becomes the caption</figcaption>
</figure>

Single Image Link

With Caption

Markdown:

[![A description of the image](image-url "An image title")](link-url "A link title")

HTML:

<figure>
  <a href="link-url">
    <figure>
      <img alt="A description of the image" src="image-url">
      <figcaption>An image title</figcaption>
    </figure>
  </a>
  <figcaption>A link title</figcaption>
</figure>

Markdown:

[![A description of the image](image-url)](link-url "A link title")

HTML:

<figure>
  <a href="link-url">
    <img alt="A description of the image" src="image-url">
  </a>
  <figcaption>A link title</figcaption>
</figure>

Markdown:

[![A description of the image](image-url "An image title")](link-url)

HTML:

<figure>
  <a href="link-url">
    <figure>
      <img alt="A description of the image" src="image-url">
      <figcaption>An image title</figcaption>
    </figure>
  </a>
</figure>

Without Caption

Markdown:

[![A description of the image](image-url)](link-url)

HTML:

<figure>
  <a href="link-url">
    <img alt="A description of the image" src="image-url">
  </a>
</figure>

Multiple Image Link

When you include only a multiple-image link within a paragraph, the images will be grouped together. Hard or soft breaks can also be used.

With Caption

Markdown:

[![Image 1 description](image-url1 "Image Title 1")  
![Image 2 description](image-url2 "Image Title 2")](link-url "A link title")

HTML:

<figure>
  <a href="link-url">
    <figure>
      <img alt="Image 1 description" src="image-url1">
      <figcaption>Image Title 1</figcaption>
    </figure>
    <figure>
      <img alt="Image 2 description" src="image-url2">
      <figcaption>Image Title 2</figcaption>
    </figure>
  </a>
  <figcaption>A link title</figcaption>
</figure>

Markdown:

[![Image 1 description](image-url1)  
![Image 2 description](image-url2)](link-url "A link title")

HTML:

<figure>
  <a href="link-url">
    <img alt="Image 1 description" src="image-url1">
    <img alt="Image 2 description" src="image-url2">
  </a>
  <figcaption>A link title</figcaption>
</figure>

Markdown:

[![Image 1 description](image-url1 "Image Title 1")  
![Image 2 description](image-url2 "Image Title 2")](link-url)

HTML:

<figure>
  <a href="link-url">
    <figure>
      <img alt="Image 1 description" src="image-url1">
      <figcaption>Image Title 1</figcaption>
    </figure>
    <figure>
      <img alt="Image 2 description" src="image-url2">
      <figcaption>Image Title 2</figcaption>
    </figure>
  </a>
</figure>

Without Caption

Markdown:

[![Image 1 description](image-url1)  
![Image 2 description](image-url2)](link-url)

HTML:

<figure>
  <a href="link-url">
    <img alt="Image 1 description" src="image-url1">
    <img alt="Image 2 description" src="image-url2">
  </a>
</figure>

Root Relative Path and Relative Path

Root Relative Path

A root relative path refers to assets located in the public directory of your project.

Markdown:

![A description of the image](/favicon/favicon-dark-128.png "An image title")

Relative Path

A relative path refers to assets inside the src directory, and it is relative to the location of the current file.

Markdown:

![A description of the image](../../assets/images/demo-avatar.png "An image title")

Options

You can specify the options in the astro.config.mjs file.

...
import remarkImageCaption from "./src/plugins/remark-image-caption.ts"
...
export default defineConfig({
  ...
  markdown: {
    ...
    remarkPlugins: [
      ...
      remarkImageCaption, // Plugin here
      ...

Name	Type	Default	Description
className	string	""	The class name to apply to the outer `<figure>` element.
excludedPaths	(string \| RegExp)[]	[]	An array of image paths that should be excluded from transformation. This can also be used to exclude paths like those under the `src` folder in Astro projects.
lazyLoad	boolean	false	Set the `loading` attribute on `<img>` elements.
linkAttributes	LinkAttributes		Set the target and relationship attributes for external links. These attributes can also be left unset to delegate handling to other plugins.

linkAttributes

Name	Type	Default	Description
target	string	''	Specify where to open linked documents. The default (empty) does not set a target on links.
rel	string	''	Define the relationship between the current document and the linked document. The default (empty) does not set any relationship.

隐私政策

Fri, 01 Jan 1999 03:20:15 GMT

All Cookies

Strictly necessary cookies（必要的cookies）

Umami：收集站点的基本访问情况，并对外显示浏览量，由本站直接提供
Giscus：提供评论功能，由 Github 提供

Functionality cookies（功能性cookies）

Tracking cookies（追蹤cookies）

Microsoft Clarity：收集站点访问情况

latest update: 2026/02/04

Clina's Blog

自由软件之输入法————手机篇

Android

同文输入法 (Trime)

小企鹅输入法 (Fcitx 5 For Android)

语燕输入法 (YuyanIME)

iOS

Fcitx 5 For iOS

Harmony OS

小企鹅输入法鸿蒙版 (Fcitx 5 For Harmony OS)

postmarket OS / Ubuntu Touch / Mobian / Pure OS

为自己的脚本语言编写VSCode支持扩展：从零到发布完整指南

为自己的脚本语言编写VSCode支持扩展：从零到发布完整指南

为什么需要为自定义语言开发VSCode扩展？

准备工作

技术栈需求

开发工具

第一步：创建扩展项目

第二步：理解项目结构

1. package.json - 扩展清单

2. 语法定义文件 (TextMate语法)

3. 语言配置文件

第三步：设计语法高亮规则

分析语言特性

编写匹配规则

第四步：添加代码片段

第五步：本地测试

启动调试

常见问题调试

第六步：高级功能

1. 添加命令和配置

2. 创建语言服务器（可选）

第七步：打包和发布

1. 安装打包工具

2. 准备发布

3. 打包

4. 发布到市场

第八步：持续维护

监控反馈

版本更新流程

最佳实践

实战经验分享

踩过的坑

效率技巧

成果展示

资源推荐

结语

如何将你的Fuwari博客部署到Codeberg Pages (Forgejo Actions版)

FreeDomainOne 域名注册教程

注意：注册的域名必须在 Free renew after 后面的日期以后一个月内续期，否则域名会被删除. <br>

osfc.org.cn && osfs.top 域名注册教程

ZoneABC 域名注册教程

PublicFreeSuffix 域名申请教程

Image Captions Example

About Image Captions

Usage

Single Image

With Caption

Without Caption

Multiple Images

With Caption

Without Caption

With Shared Caption

Single Image Link

With Caption

Without Caption

Multiple Image Link

With Caption

Without Caption

Root Relative Path and Relative Path

Root Relative Path

Relative Path

Options

linkAttributes

隐私政策

All Cookies

Strictly necessary cookies（必要的cookies）

Functionality cookies（功能性cookies）

Tracking cookies（追蹤cookies）