Markdown Preview Enhanced + Pandoc + PlantUML: How to Render Chinese Characters in Plantuml converted PNGs

rendering-chinese-in-MPE-exported-plantuml-png.md

Markdown Preview Enhanced + Pandoc + PlantUML: How to Render Chinese Characters in Plantuml converted PNGs

For a work project I have to use Markdown Preview Enhanced (a vs code extension) to export a long Markdown document to MS Word. The Markdown file is an API doc written in Chinese with lots of plantuml code blocks.

Everything works fine except the Chinese characters in the plantuml code blocks. Those characters render as empty block in the converted PNG files in the final MS word output. You can refer to the issue here: https://github.com/shd101wyy/markdown-preview-enhanced/issues/1611

Where I started

MacOS 12.1 + VS Code

• The plantuml code blocks render correctly in the MPE preview panel.
• I have installed pandoc, which is required by some conversion output format options provided in the MPE preview panel.
• I have installed ImageMagick via Homebrew sucessfully, along with all its dependencies so that at least the plantuml code blocks would convert to PNG image files.

What's missing?

The problem is not with MPE, or pandoc, or any plantuml related options in VS code, but with ImageMagick.

To ensure Chinese characters are rendered correctly by ImageMagick, you have to specify a Unicode font that supports Chinese.

Some facts about ImageMagick and fonts

• ImageMagick has a default font for use when converting any text to images. The default font is Helvetica. See ImageMagick/ImageMagick#2905 (comment). This is why Chinese characters won't render by default!.
• You can always use the -font option to specify a font when running ImageMagic from CLI.
• If in any case you want to modify the default font of ImageMagick, you need to know about the policy.xml file. See ImageMagick/ImageMagick#2905 and https://imagemagick.org/script/resources.php.
• You need to figure out the right path to place/modify the policy.xml file, so that the policy about the default font takes effect. See ImageMagick/ImageMagick#1342. In my case, ImageMagick is installed via Homebrew and it took me some time to find the right path (a template file already exists there): /usr/local/Cellar/imagemagick/7.1.0-8/etc/ImageMagick-7/policy.xml.
• Finally, you've found the right place to add the policy.

  1. I used convert -list font to find the font path. I was expecting PingFang to work.

  2. So I added font path to the following line in policy.xml:

     <policy domain="system" name="font" value="/System/Library/Fonts/PingFang.ttc"/>

And now everything works!