As an expert well-versed in website operation, I am more than happy to elaborate on how to elegantly embed mathematical formulas and flowcharts in AnQiCMS templates.In the era where content is king, high-quality content is not just text, but also visual elements that can clearly convey complex concepts, such as precise mathematical formulas and intuitive flowcharts.AnQiCMS with its excellent flexibility and powerful template engine provides a solid foundation for this.

Embed mathematical formulas and flowcharts in AnQiCMS templates: bring your content to life

In the era of information explosion, relying solely on text to elaborate complex technical concepts, data analysis, or business processes often fails to achieve **communication effects.Mathematical formulas make theories more rigorous, and flowcharts make operation steps clear at a glance.AnQiCMS, as a system committed to providing an efficient and customizable content management solution, fully understands this requirement.With its built-in Markdown editor and flexible template mechanism, you can seamlessly integrate these advanced content elements into your website.

This article will delve into how to utilize the features of AnQiCMS, through concise steps and practical code examples, to successfully render mathematical formulas and flowcharts in your website template, making your content more expressive and professional.

First step: Enable Markdown editor - the cornerstone of content

First, make sure that your AnQiCMS system has enabled the Markdown editor.This is usually found in the 'Global Settings' menu under 'Content Settings'.Once enabled, you can directly use Markdown syntax to compose content when editing articles, product details, single pages, or other content input modules.The advantage of Markdown is that it separates the structure from the presentation of content, making content maintenance and updates more efficient and convenient.

Second step: Introduce external rendering libraries - giving content 'life'

Markdown itself provides structured markup for content, but to make the browser correctly "understand" and "renderThese libraries will read formulas or chart code marked in Markdown content and convert them into graphics that browsers can recognize and display.

In AnQiCMS, you usually place the import code of these rendering libraries in the public header file of the website template, for examplebase.htmlin. This is becausebase.htmlAs the "skeleton" template of the website, it is inherited by almost all pages, ensuring that these scripts can be loaded and take effect on any page that needs to render formulas or flowcharts.

1. Embed mathematical formulas: The magic of MathJax

MathJax is a widely popular open-source JavaScript rendering engine used to display mathematics in web browsers.It supports LaTeX, MathML, and AsciiMath markup, capable of rendering complex mathematical expressions in high quality.

To introduce MathJax in your AnQiCMS template, you just need to add inbase.htmlthe file<head>the tag the followingscriptTags:

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

This code tells the browser to asynchronously load the MathJax script.After loading, MathJax will automatically scan the page content, looking for specific mathematical symbols, and render them.

Write mathematical formulas in the AnQiCMS Markdown editor:

  • Inline formula:Use a single dollar sign$to enclose mathematical expressions. For example:勾股定理：$a^2 + b^2 = c^2$
  • Block-level formula (displayed on a separate line):Use double dollar signs$$to enclose mathematical expressions. For example:二次方程的求根公式： $$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$$

With these simple tags, your mathematical formula can be recognized and beautifully presented by MathJax.

2. Draw a flowchart: The charm of Mermaid

Mermaid is a JavaScript-based chart drawing tool that allows you to define various charts using a syntax similar to Markdown, including flowcharts, sequence diagrams, Gantt charts, and more.

To introduce Mermaid in the AnQiCMS template, you also need tobase.htmlthe file<head>the tag the followingscriptthe tag and initialization code:

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

This code will load the Mermaid core library andmermaid.initialize({ startOnLoad: true });Make sure the Mermaid chart is scanned and rendered automatically after the page is fully loaded.

Write a flowchart in the AnQiCMS Markdown editor:

Mermaid charts need to be placed in a special code block, in ordermermaidas a language identifier. For example, a simple flowchart can be written like this:

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

Put the above code into a Markdown editor, and Mermaid will convert it into an interactive flowchart.Mermaid supports a wide variety of chart types and complex syntax, you can refer to the official documentation as needed to explore more features.

The third step: Ensure that the content is rendered correctly - the key displayed by the template

After introducing the rendering library and writing formulas and flowcharts using Markdown syntax, the final step is to ensure that the AnQiCMS template can correctly parse and display this content.

The AnQiCMS template engine (similar to Django template engine) is very flexible in handling content fields. When you call the content field inarchiveDetailorpageDetailtags such asContentWhen, the system will automatically render based on the enable status of the Markdown editor. However, to ensure **effect and compatibility, especially when the content contains specific markers parsed by third-party libraries, there are some points to note:

  1. Explicitly render Markdown:If yourContentThe field contains Markdown content, and it is desired to ensure that it is properly converted to HTML, which can be explicitly specified when calling the templaterender=truethe parameter and cooperate|safeA filter to prevent HTML from being escaped twice. For example:

    {% archiveDetail articleContent with name="Content" render=true %}
{{articleContent|safe}}

    Hererender=trueIndicate that AnQiCMS should convert Markdown content to HTML, and|safeThen tell the template engine that this HTML is safe and can be output directly, avoiding the escaping of special HTML structures required by MathJax and Mermaid.

  2. Optimize display style:To render Markdown content with better visual effects and readability, especially for text around formulas and flowcharts, you can choose to introduce a GitHub-style Markdown CSS stylesheet. This can be done bybase.htmlof<head>Add 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" />

    This stylesheet provides a simple and professional default appearance for your Markdown content, keeping it consistent with the overall page style.

By following these steps, your AnQiCMS website will be able to perfectly support the embedding and display of mathematical formulas and flowcharts. Whether it is complex academic papers, detailed technical documents, or clear business process descriptions, they will be presented to your visitors in a more intuitive and professional manner.This not only improves the user experience, but also greatly enhances the depth and attractiveness of your website content.

Frequently Asked Questions (FAQ)

  1. Why did I follow the steps and the formula or flowchart still didn't show up?
    • Markdown editor is not enabled:Please check whether the Markdown editor is enabled in the "Global Settings" -> "Content Settings" of AnQiCMS backend.
    • CDN loading failed: Check the browser console (F12) for any network errors related to MathJax or Mermaid, it may be due to the CDN link being inaccessible or blocked.
    • The template inclusion position is incorrect:Ensure MathJax and Mermaid'sscripttags are indeed placed inbase.htmlof<head>Tagged within, and can be loaded on the page where the content needs to be displayed.
    • Markdown syntax error:Check if the Markdown syntax of the formula or flow chart meets the requirements of MathJax or Mermaid. Mermaid code blocks usually need to start withmermaidLanguage identification, and at least one line is required before and after. MathJax's$and$$symbols need to be correctly matched.
    • The content field is not rendered correctly:Make sure in the template.