SSML Highlighter

SSML Highlighter は、Speech Synthesis Markup Language (SSML)のシンタックスハイライトを提供するパッケージです。

インストール

npm install @ssml-utilities/highlighter

使用方法

import { ssmlHighlighter } from "@ssml-utilities/highlighter";
const ssml = "<speak>Hello <emphasis>world</emphasis>!</speak>";
const options = {
  classes: {
    tag: "ssml-tag",
    attribute: "ssml-attribute",
    attributeValue: "ssml-attribute-value",
    text: "ssml-text",
  },
};
const result = ssmlHighlighter.highlight(ssml, options);

if (result.ok) {
  console.log(result.value);
}

オプション

HighlightOptionsインターフェースで以下のオプションを設定できます：

interface HighlightOptions {
  classes: {
    tag: string; // タグ要素の CSS クラス名
    attribute: string; // 属性名の CSS クラス名
    attributeValue: string; // 属性値の CSS クラス名
    text: string; // テキストコンテンツの CSS クラス名
  };
}

デフォルトのスタイル

以下のような CSS を適用することで、基本的なハイライトスタイルを設定できます：

.ssml-tag {
  color: #000fff;
}
.ssml-attribute {
  color: #ffa500;
}
.ssml-attribute-value {
  color: #008000;
}
.ssml-text {
  color: #000;
}

機能

• SSML タグのシンタックスハイライト
• 属性と属性値の区別
• HTML エスケープ処理
• エラーハンドリング

エラーハンドリング

highlight メソッドはResult型を返します：

type Result<T, E> = { ok: true; value: T } | { ok: false; error: E };

エラーが発生した場合は、ok: falseとerrorメッセージが返されます。

使用例

ネストされた SSML のハイライト：

const complexSSML = (
  <speak>
    {" "}
    <prosody rate="slow" pitch="+2st">
      {" "}
      こんにちは、 <emphasis level="strong">世界</emphasis>！{" "}
    </prosody>
  </speak>
);
const result = ssmlHighlighter.highlight(complexSSML, options);

MIT ライセンスの下で公開されています。詳細はLICENSEファイルを参照してください。