So Outside Technology Security CMS
AnQiCMS
Online Demonstration

How to introduce the necessary JavaScript library for Markdown rendering in the `base.html` file?

Calendar 100

AnQiCMS provides a convenient and efficient Markdown editor for content creators, allowing us to easily organize the structure of articles, insert code blocks and images.However, when our content needs to display complex mathematical formulas or clear flowcharts, relying solely on Markdown syntax itself is not enough to make them present beautifully on the web.These advanced features require the introduction of specific JavaScript libraries on the browser side to be correctly parsed and rendered.

How can you integrate these necessary JavaScript libraries into your AnQiCMS website to ensure perfect display of Markdown content? The key is to modify the public template file of the websitebase.html.

Enable Markdown editor

Before starting to modify the template file, we first need to confirm a premise: you have already enabled the Markdown editor in the AnQiCMS backend.This is usually found under the 'Global Settings' under the 'Content Settings' option.Make sure the Markdown editor is turned on so that the system can correctly identify and process the content you write in Markdown format.

Why choosebase.html?

In the template system of AnQiCMS,base.htmlFiles play a foundational role. They contain the public header of the website (<head>) and the footer (<footer>In these areas, almost all other page templates inherit this basic skeleton. Therefore, the general JavaScript library and CSS styles are introduced tobase.htmlthe file<head>Tags inside are the most reasonable and efficient approach. This ensures that these features can be loaded and executed on all pages of your website without repetition.

Introduce necessary scripts for Markdown content

Next, we will proceed step by step inbase.htmlthe file<head>The tag internally introduces three parts of code, each used to enhance the Markdown style, support mathematical formula rendering, and support flowchart display.

1. Introduce Markdown content style (optional)

To make the rendered Markdown content more visually readable, we can introduce a set of commonly used GitHub style Markdown stylesheets.This will provide a simple and professional layout for your Markdown content, enhancing the reading experience.

Add the following line of code tobase.htmlthe file<head>within the tag:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

2. Support mathematical formula rendering (MathJax)

If you need to insert and correctly display mathematical formulas with LaTeX syntax, MathJax is a very powerful solution.It can parse and render mathematical formulas on the page into high-quality images or text, ensuring clear display on different browsers and devices.

Please add the following JavaScript reference tobase.htmlthe file<head>Inside the tag:

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

This has been usedasyncthe attribute, which means the script will load asynchronously, not block the rendering of the page, and help improve the user experience.

3. Supports flowchart rendering (Mermaid.js)

For scenarios that require displaying structured information such as flowcharts, sequence diagrams, or Gantt charts, Mermaid.js is an ideal choice.It allows you to generate complex charts through simple text descriptions.

The way to integrate Mermaid.js is as follows, placed inbase.htmlthe file<head>Inside the tag:

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
</script>

This script passes throughtype="module"Introducing the Mermaid library, which initializes automatically when the page loads, enabling it to recognize and render Mermaid syntax in Markdown code blocks.

Check the results

Complete the addition of the above code and savebase.htmlAfter the file, you can log in to the AnQiCMS backend, create or edit a document. Try inserting a mathematical formula in the Markdown editor (for example, using$$...$$or$...$Wrap LaTeX syntax) and Mermaid diagrams (usingmermaid ...`Wrap Mermaid syntax).

For example, you can try:

Mathematical formula:

这是一个内联公式：$E=mc^2$
这是一个块级公式：
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

Flowchart:

graph TD
    A[Start] --> B{Decision};
    B -- Yes --> C[Perform action];
    B -- No --> D[End];
    C --> D;

After publishing the document, visit the front-end page and check if these elements are rendered and displayed correctly.If everything is normal, congratulations, your AnQiCMS website now has powerful Markdown content display capabilities, which can present various complex information in a more professional and vivid way.

Frequently Asked Questions (FAQ)

  1. Why is my mathematical formula or flowchart not displaying correctly and only showing the original code?First, make sure you have enabled the Markdown editor in the "Global Settings" -> "Content Settings" of the AnQiCMS backend. Next, checkbase.htmlDid the code for MathJax and Mermaid.js get correctly included in the file and is it positioned in<head>the tag inside. Moreover, in your content template (for examplearchive_detail.htmlorpage_detail.htmlMake sure you use the variables (such as{{archive.Content}}) added at the end|render|safeFilter, for example{{archive.Content|render|safe}}This is how the system will convert Markdown to HTML and allow the browser to parse the script inside it.

  2. Can I use other Markdown styles or libraries for rendering math formulas/process diagrams?Theoretically, it is possible. AnQiCMS provides high-level template customization capabilities, and you can completely replace or add other compatible JavaScript libraries according to your needs.For example, you can choose different Markdown CSS frameworks or other math formula rendering engines.Please note that after replacement, you must ensure that the new library is compatible with the template rendering mechanism of AnQiCMS and the syntax of your Markdown content, and that it has been fully tested to avoid rendering errors or functional conflicts.

  3. Will introducing these external scripts affect the loading speed of the website?The loading of external scripts indeed increases page requests and some network latency.However, the MathJax and Mermaid.js we refer to here both use CDN (Content Delivery Network), which means users can load scripts from the server closest to their geographical location, thereby reducing latency.MathJax also particularly usedasyncProperty, allows scripts to be loaded asynchronously, try not to block the initial rendering of the page.For most AnQiCMS users, the functional enhancements brought by these libraries far outweigh the minor impact they may have on loading speed, and through reasonable CDN and asynchronous loading, the impact has been minimized.

Related articles

After Markdown editing, do you need additional CDN resources to support MathJax or Mermaid?

In AnQi CMS, the addition of the Markdown editor undoubtedly brings great convenience to content creation, especially for users who need to write technical documents, academic papers, or complex explanations, the ability to directly insert mathematical formulas (MathJax) and flowcharts (Mermaid) is an even more delightful feature.However, whether additional CDN resources are needed to support the display of these advanced Markdown elements is a consideration many users will have before using them.From the actual operational experience

2025-11-08

How to implement the front-end display of Mermaid flowcharts embedded in AnQiCMS Markdown content?

In AnQi CMS, the Markdown editor brings great flexibility to content creation, and when we need to embed dynamic and intuitive charts such as flowcharts and sequence diagrams in articles, Mermaid is undoubtedly a powerful tool to enhance the expression of content.How can you elegantly embed Mermaid flowcharts in the Markdown content of Anqi CMS and ensure that they display normally on the front-end page?This is actually the process of extending backend editing capabilities to frontend rendering, the entire configuration process is very intuitive.### Step 1

2025-11-08

How to ensure that mathematical formulas in Markdown content are displayed correctly on the web?

In content creation, especially when involving the fields of science, technology, engineering, or mathematics (STEM), it is crucial to present mathematical formulas clearly and accurately.It is often difficult to directly present complex mathematical symbols in traditional web content publishing, but AnQiCMS, with its powerful Markdown editor, combined with some simple configurations, can perfectly present your mathematical formulas on the web.The design philosophy of AnQiCMS is to provide an efficient, easy-to-use, and customizable content management solution.It supports Markdown syntax natively

2025-11-08

How to apply GitHub style CSS to rendered Markdown content in AnQiCMS?

In website operation, high-quality content is the core to attract users, and the beautiful layout of the content directly affects the reading experience.AnQiCMS provides a powerful Markdown editor that makes content creation efficient and convenient.To display these Markdown contents with a professional and neat visual effect on your website, we can simply configure them to have GitHub-style CSS styles.Why Choose GitHub Style CSS?GitHub style Markdown

2025-11-08

How to troubleshoot exceptions when displaying mathematical formulas or flowcharts in a Markdown editor on the front end?

In Anqi CMS, the Markdown editor brings us great convenience, especially when we need to insert mathematical formulas or draw flowcharts.By concise syntax, we can easily express complex concepts.However, sometimes after using these advanced features, they may not display as expected, but instead display exceptions, such as only displaying the original Markdown text, or some content cannot be parsed.Don't worry when encountering such problems. This is usually not a problem with the safety CMS itself, but rather a problem with some link in the configuration, content writing, or frontend loading process.

2025-11-08

Does AnQiCMS support the configuration of a custom Markdown renderer?

In the daily operation of AnQiCMS, we often encounter refined needs for content presentation, especially for those who are accustomed to writing content in Markdown, it is natural to be concerned about whether the system supports the configuration of custom Markdown renderers.In fact, Markdown, with its concise and efficient features, has become the preferred choice for many content creators.From the design philosophy of AnQi CMS, it is committed to providing an efficient, customizable, and easy-to-expand content management solution.

2025-11-08

How to implement syntax highlighting for code blocks in Markdown content rendered to HTML?

In Anqi CMS, managing content, especially documents containing code, you may want to display code blocks in a beautiful and easy-to-read manner, which usually requires syntax highlighting.Markdown is a lightweight markup language that makes content creation simple and efficient, and the built-in Markdown editor of Anqí CMS is even more powerful.How can code blocks in Markdown content be syntax highlighted when rendered into HTML?

2025-11-08

How to automatically generate an article table of contents (TOC) based on Markdown content?

How to effectively organize the structure of long articles while managing website content with Anqi CMS, which is a worthy issue to pay attention to.Automatically generate an article table of contents (Table of Contents, abbreviated as TOC) is a very practical solution.It not only allows readers to quickly understand the outline of the article, but also makes it convenient for them to jump to the parts of interest, while also helping search engines better understand the structure of the article.

2025-11-08