在 HTML 网页中使用 pinyin-pro 标注拼音

目标是在HTML网页中给需要的中文标注拼音，在网上搜索了很多，最终选择使用pinyin-pro来进行拼音标注。

刚开始的时候，按照pinyin-pro的帮助文件，很快的成功的标注了拼音。但是在使用到pinyin-pro的添加词典功能时，很遗憾的是照着帮助文件，废了半天劲，也没能成功添加成功字典。经过各种尝试，反复实验，最终在HTML网页中成功使用pinyin-pro的添加词典功能。

对于如何使用pinyin-pro标注拼音，请参照pinyin-pro的帮助文件，这里不再赘述。

参照pinyin-pro的使用示例，按照以下的步骤即可成功在 HTML 网页中使用 pinyin-pro 进行标注拼音。

1. 在HTML的head标签中添加以下的代码，引入"pinyin-pro"和"@pinyin-pro/data/complete"拼音包。

<script type="importmap">
{
	"imports": {
		"pinyin-pro": "https://esm.sh/pinyin-pro",
		"@pinyin-pro/data/modern": "https://esm.sh/@pinyin-pro/data/dist/modern",
		"@pinyin-pro/data/complete": "https://esm.sh/@pinyin-pro/data/dist/complete"
	}
}
</script>

2. 下面是使用使用内置词典(默认)的代码示例。

<script type="module">
	import { pinyin } from 'pinyin-pro';

	const result1 = pinyin('小明硕士毕业于中国科学院计算所，后在日本京都大学深造');
</script>

※使用内置词典(默认)的使用示例：
小明硕士毕业于中国科学院计算所，后在日本京都大学深造。

3. 下面是使用现代汉语词典的代码示例。

<script type="module">
	import { pinyin, addDict } from 'pinyin-pro';
	import ModernChineseDict from '@pinyin-pro/data/modern';

	addDict(ModernChineseDict);

	const result = pinyin('小明硕士毕业于中国科学院计算所，后在日本京都大学深造');
</script>

※使用现代汉语词典的使用示例：
小明硕士毕业于中国科学院计算所，后在日本京都大学深造。

4. 下面是使用完整词典的代码示例。

<script type="module">
	import { pinyin, addDict } from 'pinyin-pro';
	import CompleteDict from '@pinyin-pro/data/complete';

	addDict(CompleteDict);

	const result = pinyin('小明硕士毕业于中国科学院计算所，后在日本京都大学深造');
</script>

※使用使用完整词典的使用示例：
小明硕士毕业于中国科学院计算所，后在日本京都大学深造。

链接