Make content more vivid: How AnQiCMS Markdown Editor elegantly presents mathematical formulas and flowcharts
AnQiCMS recently upgraded to include an integrated Markdown editor, which undoubtedly brings great convenience to content creation.For operators who need to write technical documents, tutorials, reports, or any content that includes complex logic demonstrations, it is undoubtedly a blessing to be able to directly insert mathematical formulas and flowcharts into the article and have them displayed correctly.This article will discuss in detail how to implement this feature in AnQiCMS, making your content more expressive.
Open 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' page 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 just a lightweight markup language, it does not directly handle the rendering of mathematical formulas or flowcharts.To display these advanced elements correctly and beautifully on the web, we need to rely on some mature third-party JavaScript libraries and CSS styles.These libraries are typically introduced in the website template files, especially in the public header files, such asbase.htmlto ensure they can be loaded on all relevant pages.
You can find the current template directory undertemplate/您的模板名/base.htmlFile (or any other file responsible for the public header area of the website), and<head>Add the following code at the appropriate position inside the tag:
1. Optimize Markdown default style
To make the rendered Markdown content more visually readable, AnQiCMS provides an integrated GitHub style method. Simply introduce 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. 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. By introducing the MathJax library, your page can dynamically convert mathematical formulas in LaTeX or AsciiMath format into high-quality typesetting:
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
3. Enable the dynamic drawing of flowcharts
The flowchart can visually demonstrate 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.Add it to your template to dynamically generate these charts on the front end:
<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 code snippet above iscdnjs.cloudflare.comandcdn.jsdelivr.net）Provided a stable and fast resource loading service.
Write and display in the content.
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.
- Inline formula: Enclosed by a single dollar sign, for example
$x^2 + y^2 = z^2$. - Block formula: Enclosed by double dollar signs, for example
$$ \sum_{i=1}^n i = \frac{n(n+1)}{2} $$.
Flowchart:
The flowchart uses the specific syntax of Mermaid.js. You need to create one in the Markdown content.mermaidcode block:
graph TD;
A[Start] --> B{Decision};
B --> C{Yes} --> D[Perform Task];
B --> E{No} --> F[End];
D --> F;
AnQiCMS will automatically convert Markdown content to HTML. In the template file, when you use{{ 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. Typically, to ensure that the HTML content is correctly parsed and not displayed as plain text, you may also need to use templates in the template.|safeFilter, for example{{ archive.Content|safe }}This way, your mathematical formulas and flowcharts can be beautifully presented on the front-end page.
Conclusion
With these configurations, your AnQiCMS website not only has 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 combined with the powerful features of Markdown can help you a lot, making information transmission more efficient and intuitive.
Frequently Asked Questions (FAQ)
Q1: I have enabled the Markdown editor and added the required code, but the formulas and flowcharts are still not displaying. What should I do?
A1: First, please carefully check that you havebase.html(Or in the other public header template file) the CDN link added is completely correct, including the URL and<script>or<link>Label integrity. Ensure that your network environment can access these CDN resources. Next, confirm that these code snippets are placed in<head>Within the tag, so that the page can initialize in time when loaded. Finally, please check whether the LaTeX and Mermaid.js syntax used in the content of your article is standard and free of spelling errors.Any minor grammatical error can lead to rendering failure.
Q2: Why do I see the original HTML tags (such as<p>/<strong>) was parsed as plain text instead of 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, converting<to<,>to>wait. In order to have these HTML tags rendered correctly by the browser, you need to call the content field in the template file using|safeFilter. For example, to{{ archive.Content }}is modified to{{ archive.Content|safe }}. This filter informs the template engine that this content is safe HTML and can be output directly without escaping.
Q3: What mathematical formulas and syntax for flowcharts does AnQiCMS support? Where can I find more detailed guidelines?
A3: AnQiCMS's Markdown editor integrates MathJax to realize math formula rendering, mainly supporting standard LaTeX syntax. You can write inline formulas (such as$E=mc^2$And block-level formulas (such as$$ \int_a^b f(x) dx $$)。Flowcharts are supported by the Mermaid.js library, you can use the concise text syntax provided by Mermaid to draw flowcharts, sequence diagrams, and so on.Please refer to the official documentation of MathJax (docs.mathjax.org) and Mermaid.js (mermaid.js.org) for more detailed and richer syntax examples and usage guides.