Does `MathJax` and `Mermaid` require additional configuration to preview the effects in the Anqi CMS backend editor?

As an experienced AnQi CMS website operation person, I am well aware of the importance of content presentation and how to use the system's functions to provide **an excellent browsing experience for readers.About the question you raised regarding whether additional configuration is needed for the preview effect of MathJax and Mermaid in the Anqi CMS backend editor, combined with the latest system documentation, I can elaborate in detail for you.

Firstly, Anqi CMS has introduced support for Markdown editors in the latest version, which undoubtedly greatly enhances the efficiency and flexibility of content creators.By using the Markdown editor, users can directly insert MathJax formatted mathematical formulas and Mermaid formatted flowcharts in the background editing interface.The system itself has the ability to recognize these special syntaxes and save them as part of the content.

However, it should be made clear that, although the Anqi CMS Markdown editor supports these syntaxes, the correct display of MathJax and Mermaid - that is, rendering in a beautiful, interactive manner on the web - still depends on external third-party plugins.These plugins are based on JavaScript and CSS libraries, responsible for parsing formulas and chart syntax embedded in Markdown and converting them into visual elements recognizable by the browser.

To ensure that these mathematical formulas and flowcharts can be displayed normally on your website front page to visitors, you need to make additional configurations. According to the document instructions provided by Anqi CMS, this mainly involves in the website template'sbase.htmlInclude the corresponding CDN resources in the file. For example, to enable the correct display of MathJax, you need tobase.htmlAdd the asynchronous loading script for MathJax at the top. Similarly, for Mermaid flowcharts, you need to import the Mermaid ESM module and perform the initialization configuration, usually also placed atbase.htmlIn the file. These steps are for the public access end of the website, ensuring that users can see beautifully rendered formulas and flowcharts when browsing your website.

As for the effect of previewing these MathJax and Mermaid contents in the Anqi CMS backend editor in real-time, the situation is somewhat different.The editor itself, as an input tool, usually tries to visually present the Markdown content with its built-in preview feature.For plain text or standard Markdown syntax, the preview effect is very close to the final rendering effect.However, for content that requires complex JavaScript libraries for parsing and rendering, such as MathJax and Mermaid, the preview of the background editor may not provide real-time effects that are completely consistent with the website's frontend, including full styles and interactive functions.

This is because the backend editor usually aims for quick content input and basic structure display, while fully simulating the frontend rendering environment may involve loading all frontend resources, which will increase the complexity and resource consumption of the editor.Therefore, you can expect to see MathJax or Mermaid syntax blocks recognized in the background editor, and even possibly a basic, non-interactive visual cue, but to verify the final style, layout, or interactivity, **practice is still to view the actual style, layout, or interactivity on the website front-end page after publishing or saving the content.

In summary, although MathJax and Mermaid can be correctly inputted and recognized in the Anqi CMS backend editor, additional configuration is necessary to ensure they are displayed correctly on your website and can be normally browsed by users, and this configuration mainly focuses on your website's frontend templatebase.htmlIntroduce the necessary third-party CDN resources. The preview function of the background editor may provide a basic view, but there may be differences in the final rendering effect compared to the front-end.

Frequently Asked Questions

• Why does the MathJax formula or Mermaid chart on the website not display normally after I publish the content, only showing the original code?

  • Answer: This is usually because you have not included the front-end template file of the website (for examplebase.html）Correctly introduce the CDN resources required for MathJax and Mermaid, or check for caching issues after introduction.help-markdown.mddocument, ensure the relevantscriptandlinkThe tag has been correctly added to your template and the website cache and your browser cache have been cleared to ensure that the latest template files and scripts are loaded.

• Ask: Can I see the real-time rendering effects of MathJax and Mermaid in the Anqi CMS background editor?

  • Answer: The Anqi CMS Markdown editor supports syntax input for MathJax and Mermaid.For real-time preview effects, the editor usually tries to provide a basic visual presentation.However, to achieve a rendering effect that is completely consistent with the final website, complete with full styling and interactive features, the editor may need to rely on the same external JavaScript libraries as the frontend.Due to the fact that the official documentation mainly emphasizes the configuration of the front-end page, if the back-end editor fails to display the perfect rendering effect, this may be a functional difference, or it may be necessary to ensure that the back-end access pages can also load these external resources.

• Ask: Can we use locally deployed MathJax and Mermaid libraries instead of CDN resources?

  • Answer: The official documentation provides the configuration method for using CDN resources, which is usually the simplest and recommended method because it can take advantage of the global distribution advantages of CDN to speed up loading speed. Although theoretically, these libraries can be downloaded to the local server and deployed independently, this requires you to manually manage file paths and version updates, and modify the template in thescriptandlinkThe tag points to local resources. For most users, following the documentation to use CDN will be more convenient and stable.