Hexo 博客添加注音功能

简介

最近想在博客中写一些日语学习笔记，需要用到 ruby 标签来显示假名注音。虽然可以直接在 markdown 中使用 ruby 标签，但写起来实在太麻烦了。网上也有一些 hexo 插件可以实现这个功能，但要么语法太复杂，要么和我用的渲染器不兼容。于是使用 hexo 的 filter 功能写了一个简单的插件。

代码如下：

// scripts/ruby.js
'use strict';

hexo.extend.filter.register('before_post_render', function(data) {
  if (!data.content) return data;

  // 将内容分割为代码块和非代码块部分
  const contentParts = [];
  const codeBlockRegex = /```[\s\S]*?```|`[\s\S]*?`/g;
  let lastIndex = 0;
  let match;

  while ((match = codeBlockRegex.exec(data.content)) !== null) {
    // 添加代码块前的文本
    if (match.index > lastIndex) {
      contentParts.push({
        type: 'text',
        content: data.content.substring(lastIndex, match.index)
      });
    }

    // 添加代码块
    contentParts.push({
      type: 'code',
      content: match[0]
    });

    lastIndex = match.index + match[0].length;
  }

  // 添加最后一个代码块后的文本
  if (lastIndex < data.content.length) {
    contentParts.push({
      type: 'text',
      content: data.content.substring(lastIndex)
    });
  }

  // 注音 {漢|かん}
  const pattern = /{([^{}|]+)\|([^{}]+)}/g;

  // 只处理非代码块部分
  const processedParts = contentParts.map(part => {
    if (part.type === 'code') {
      return part.content;
    } else {
      return part.content
        .replace(pattern, (match, base, rt) => {
          return `<ruby>${base}<rt>${rt}</rt></ruby>`;
        });
    }
  });

  // 重新组合内容
  data.content = processedParts.join('');
  return data;
});;

在 hexo 项目的 scripts 目录下新建一个 ruby.js 文件，将上面的代码复制进去即可。

使用方法

{耄|mào}{耋|dié} 耄 mào 耋 dié

{一方通行|アクセラレータ} 一方通行アクセラレータ

{这是一段文本|这是一段注音} 这是一段文本这是一段注音

在 tag 插件和表格中也可以使用：

とある魔術の{禁書目録|インデックス} とある魔術の禁書目録インデックス

文本	注音
超电磁炮	超电磁炮レールガン

在 VSCode 中预览

我一般用 VSCode 写文章，希望在 VSCode 中的预览中也能看到注音效果。具体方法如下：

1. 安装 Markdown Preview Enhanced 插件
2. Ctrl + Shift + P 打开命令面板，找到 Markdown Preview Enhanced: Extend Parser 命令
3. 根据需要选择在工作区还是全局扩展解析器
4. 选择后会自动打开 parser.js 文件，将内容替换为下面的代码

({
  onWillParseMarkdown: async function(markdown) {
    const parts = [];
    const codeBlockRegex = /```[\s\S]*?```|`[\s\S]*?`/g;
    let lastIndex = 0;
    let match;

    while ((match = codeBlockRegex.exec(markdown)) !== null) {
      if (match.index > lastIndex) {
        parts.push({
          type: 'text',
          content: markdown.substring(lastIndex, match.index)
        });
      }
      
      parts.push({
        type: 'code',
        content: match[0]
      });
      
      lastIndex = match.index + match[0].length;
    }
    
    if (lastIndex < markdown.length) {
      parts.push({
        type: 'text',
        content: markdown.substring(lastIndex)
      });
    }

    const processedParts = parts.map(part => {
      if (part.type === 'code') {
        return part.content;
      } else {
        return part.content.replace(/\{([^|\{\}]+)\|([^|\{\}]+)\}/g, (match, base, ruby) => {
          return `<ruby><rb>${base}</rb><rt>${ruby}</rt></ruby>`;
        });
      }
    });

    return processedParts.join('');
  },

  onDidParseMarkdown: async function(html) {
    return html;
  }
})