How to enable Markdown editor in AnQiCMS and display mathematical formulas and flowcharts correctly?
Today, with the increasing richness of content creation, plain text is no longer sufficient to express complex concepts.Whether it is a complex mathematical formula in an academic article or a clear process diagram in project management, presenting it intuitively on the web page will undoubtedly greatly enhance the professionalism and user experience of the content.AnQiCMS (AnQiCMS) fully understands this need, through built-in Markdown editors and flexible frontend configurations, allowing you to easily achieve these advanced content displays.
This article will introduce in detail how to enable Markdown editor in AnQiCMS and ensure that mathematical formulas and flow charts can be displayed correctly.
Enable Markdown editor
Firstly, you need to make simple backend settings to support Markdown syntax in your content editor.
In the AnQiCMS backend management interface, find and enter the "Content Settings" page under "Global Settings".On this page, you will see an option for 'Enable Markdown Editor'.Check this option to enable Markdown editor and save your changes.
After enabling, when you create or edit documents, the editor will display them in Markdown mode, allowing you to directly create content using Markdown syntax.
Insert mathematical formulas and flowcharts in the content
After enabling the Markdown editor, you can write mathematical formulas and flowcharts in the document content.AnQiCMS supports widely used LaTeX syntax for expressing mathematical formulas, as well as Mermaid syntax for drawing flowcharts.
- Mathematical formula:You can use a single dollar sign
$...$Wrap inline formulas, for example$\sum_{i=1}^n i = \frac{n(n+1)}{2}$. For block-level formulas that are displayed independently, use double dollar signs$$...$$Wrap, for example:
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
- Flowchart:The drawing of flowcharts relies on Mermaid syntax. You just need to use specific
mermaidcode blocks:
graph TD
A[Start] --> B{Decision};
B -- Yes --> C[Perform Action 1];
C --> D[End];
B -- No --> E[Perform Action 2];
E --> D;
After saving the document, although this Markdown content already exists in the database, in order to render it correctly as visual formulas and charts on the front-end page of the website, some configuration of the front-end template is still needed.
Configure the front-end template to display correctly
Correctly display mathematical formulas and flowcharts, mainly depending on introducing the corresponding third-party JavaScript libraries and CSS styles on the front-end page.These libraries will parse the specific syntax in Markdown content and render it as beautiful graphics or formulas.In AnQiCMS, this usually means modifying your template file, especiallybase.htmlOr similar templates responsible for the basic structure of the page.
AnQiCMS provides a convenient way to introduce these resources:
Apply style to Markdown content (optional)To make the rendered Markdown content more readable on the front end, such as in the style of GitHub, you can introduce a CSS stylesheet. Add the following code to your
base.htmlthe file<head>Inside 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 CSS file provides a unified and beautiful style for Markdown-rendered elements (such as headings, lists, code blocks, etc.)
Correctly displays mathematical formulasThe rendering of mathematical formulas is usually implemented through the MathJax library. Add the following code to your
base.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 line of code will asynchronously load the MathJax script, which will automatically scan the LaTeX mathematical formulas on the page and render them into high-quality typesetting.
Display the flowchart correctlyThe rendering of flowcharts requires the Mermaid library. Add the following code to your
base.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 will load the Mermaid library and initialize it,
startOnLoad: trueThe parameter ensures that Mermaid automatically finds and renders all flowchart code blocks after the page has finished loading.Markdown is rendered when the content is output.This is the most critical step. When you call the content field of an article, category, or single page in the template (usually
ContentWhen the field is displayed, AnQiCMS defaults to outputting the original Markdown text.In order for the library to be introduced on the front end to recognize and render this Markdown content, you need to explicitly tell AnQiCMS to convert it to HTML when outputting.While using
archiveDetail/categoryDetailorpageDetailto getContentthe field, please addrender=truethe parameter and cooperate|safefor example:{% archiveDetail articleContent with name="Content" render=true %} {{articleContent|safe}}render=trueThis parameter indicates that AnQiCMS will pre-convert Markdown content to HTML on the backend.|safeThis filter prevents the template engine from escaping HTML code twice, ensuring that the converted HTML can be correctly parsed by the browser.
By following these steps, the Markdown content you create in AnQiCMS that includes mathematical formulas and flowcharts can be perfectly displayed on the website front page.
Summary
AnQiCMS provides support for Markdown editors, combining the flexible template configuration capabilities of the front-end, making it very simple to display a rich variety of content on the website.From enabling the editor to introducing the necessary third-party libraries, to rendering content correctly in the template, every step aims to help you build a professional and expressive website efficiently.
Frequently Asked Questions (FAQ)
1. Why did I enable the Markdown editor and also wrote mathematical formulas and flowcharts in the content, but the front-end page still displays the original Markdown code?This is usually because you did not correctly inform AnQiCMS to render Markdown content in your front-end template. Please check your template file (such asdetail.html), make sure to callContentThe field was addedrender=trueParameters and|safefor example:{{archiveContent|render|safe}}.
2. Can I replace the CDN links of MathJax and Mermaid with self-built services to improve loading speed or deal with unstable CDN situations?Absolutely. The CDN link provided in the document is just an example for quick deployment.You can download the MathJax and Mermaid release packages to your server and thenbase.htmlof<script>and<link>label'ssrcorhrefThe property points to your local file path.
3. In addition to the article content, can category pages and single pages also use the Markdown editor and these advanced features?Yes. AnQiCMS category details (categoryDetail) and single page details (pageDetail) tags are also supported,Contentfield, and this field can also be added by render=trueParameters are used to render Markdown content. This means you can use Markdown syntax, including mathematical formulas and flowcharts, in places like category descriptions, single-page introductions, and so on.