Make content more vivid: How AnQiCMS Markdown Editor presents mathematical formulas and flowcharts elegantly
AnQiCMS recently upgraded to include an embedded Markdown editor, which undoubtedly brings great convenience to content creation.For operators who need to write technical documents, tutorials, reports, or any content that involves complex logic demonstration, being able to directly insert mathematical formulas and flowcharts into the article and ensure they are displayed correctly is undoubtedly a great blessing.This article will discuss in detail how to implement this feature in AnQiCMS, making your content more expressive.
Turn on the Markdown editor
Firstly, to make full use of this new feature, we need to make simple settings in the AnQiCMS backend.Please go to the 'Global Settings' under the 'Content Settings' page, where you will find the option to enable Markdown editor.After enabling, you can switch to Markdown mode while editing articles, pages, and other content, enjoying a simple and efficient writing experience.
Introduce third-party libraries to achieve advanced rendering
Markdown itself is a lightweight markup language that does not directly handle the rendering of mathematical formulas or flowcharts.In order to display these advanced elements correctly and beautifully on the web page, we need to rely on some mature third-party JavaScript libraries and CSS styles.base.htmlTo ensure they load on all related pages.
You can find your current template directory under.template/您的模板名/base.htmlfile (or any other file responsible for the public header area of the website), and in<head>Label the appropriate position inside the tag with the following code:
1. Optimize the default Markdown style
In order to make the content rendered by Markdown more visually readable, AnQiCMS provides an integrated method for GitHub style. Just include an external CSS file, and your Markdown content will present a familiar, clean layout effect:
<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. English translation: Implement the correct display of mathematical formulas
The rendering of mathematical formulas, especially those complex LaTeX expressions, requires powerful tools to parse and beautify.MathJax is such an industry standard.
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
3. Enable dynamic drawing of flowcharts
The flowchart can visually display business logic or system architecture.Mermaid.js is a widely popular solution that allows you to define various charts (including flowcharts, sequence diagrams, Gantt charts, etc.) using a concise text syntax.
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
Please note that the CDN link in the aforementioned code snippetcdnjs.cloudflare.comandcdn.jsdelivr.net) provides a stable and fast resource loading service.
Write and display content in
After completing the above configuration, you can freely create in the AnQiCMS Markdown editor.
Mathematical formula:
You can use standard LaTeX syntax to write mathematical formulas.
- 行内公式：使用单个美元符号包裹，例如
$x^2 + y^2 = z^2$. - Block-level formula: Enclosed by double dollar signs, for example
$$ \sum_{i=1}^n i = \frac{n(n+1)}{2} $$.
Flowchart:
The flowchart is created using the specific syntax of Mermaid.js. You need to create amermaidCode block:
graph TD;
A[Start] --> B{Decision};
B --> C{Yes} --> D[Execute Task];
B --> E{No} --> F[End];
D --> F;
AnQiCMS in rendering Markdown content will automatically convert it to HTML. In the template file, when you go through{{ archive.Content }}or{{ page.Content }}When calling the content field in this way, the system will process Markdown text and output the corresponding HTML structure. Usually, to ensure that the HTML content is correctly parsed and not displayed as plain text, you may also need to use|safeFilter, for example{{ archive.Content|safe }}Thus, your mathematical formulas and flowcharts can be beautifully presented on the front-end page.
Concluding remarks
Through these configurations, your AnQiCMS website not only provides a more modern content editing experience, but also presents complex mathematical concepts and business processes in a professional and easy-to-understand manner.Whether it is to build a technical blog, an online course platform, or an enterprise knowledge base, AnQiCMS combines the powerful functions of Markdown to help you a hand, making information transmission more efficient and intuitive.
Common Questions (FAQ)
Q1：I have enabled the Markdown editor and added the required code, but the formulas and flowcharts still do not display. What should I do?
A1：Firstly, please carefully check that you havebase.htmlIn the (or other public header template file) added CDN link, is it completely correct, including the URL and<script>or<link>Label integrity. Ensure that your network environment can access these CDN resources normally. In addition, confirm that these code snippets are placed in<head>
Q2：Why does the content I save in a Markdown editor display original HTML tags (such as<p>/<strong>）was also parsed as plain text, rather than being rendered by the browser?
A2：When AnQiCMS converts Markdown content to HTML, for website security, the template engine may default to escaping the output content, which<Converted to<,>Converted to>auto. To ensure that these HTML tags are rendered correctly by the browser, you need to use the content field when calling it in the template file.|safeFilter. For example, to{{ archive.Content }}Change to{{ archive.Content|safe }}This filter informs the template engine that the content is safe HTML and can be output directly without escaping.
Q3：AnQiCMS supports which mathematical formulas and syntax for flowcharts? Where can I find more detailed guidelines?
A3：AnQiCMS 的 Markdown 编辑器通过集成 MathJax 实现数学公式渲染，主要支持标准的 LaTeX 语法。您可以撰写行内公式（如$E=mc^2$）and block-level formulas (such as$$ \int_a^b f(x) dx $$）。The flowchart is supported by the Mermaid.js library, you can use the concise text syntax provided by Mermaid to draw flowcharts, sequence diagrams, and so on.建议您查阅 MathJax (docs.mathjax.org) 和 Mermaid.js (mermaid.js.org) 的官方文档，获取更详细、更丰富的语法示例和使用指南。