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

更新日期：2026/07/02 21:00:48

目标是在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>

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

5. pinyin-pro的完整HTML示例。(从我其他文章拷贝过来的)

下面的代码也可以在w3schools.com的网上编辑器进行测试。需要自己把下面的代码拷贝过去。


<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

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

  <style>
    html, body, p {
      font-family: 'Microsoft Yahei UI', NSimSun, sans-serif;
    }

    .py-result-item {
      margin-top: 5px;
      margin-bottom: 0px;
      margin-right: 0px;
      margin-left: 5px;
      min-width: 50px;
    }

    .py-result-item .py-chinese-item {
      width: auto;
      color: blue;
    }

    .py-pinyin-item {
      font-size: 80%;
      font-family: 'Microsoft Yahei', NSimSun, sans-serif;
    }
  </style>
</head>
<body>

  <p>小明硕士毕业于中国科学院计算所，后在日本京都大学深造。</p>

  <button>给上面的中文标注拼音</button>

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

    import CompleteDict from '@pinyin-pro/data/complete';

    $(document).ready(function () {
      $("button").click(function () {
        addDict(CompleteDict);
        $("p").html(html($("p").text()));
      });
    });
  </script>
</body>
</html>

链接