How to integrate and display Markdown, mathematical formulas, and flowcharts correctly on the AnQiCMS page?
In AnQiCMS, adding Markdown, mathematical formulas, and flowcharts greatly enhances the expressiveness and readability of content, especially for technical documents, educational materials, or data analysis reports.AnQiCMS as an efficient content management system provides flexible mechanisms to support these modernized content display needs.
To implement the correct display of Markdown, mathematical formulas, and flowcharts on the AnQiCMS page, it mainly involves enabling the background settings and necessary introduction of front-end templates.Here are the detailed steps and some practical suggestions.
One, enable the Markdown editor
AnQiCMS provides a modern content creation environment, especially in supporting Markdown editors, which greatly improves the efficiency and quality of content publishing.Markdown with its concise syntax allows content creators to focus on the content itself rather than on tedious formatting.
To make full use of the advantages of Markdown, you first need to enable it in the background. This is usually inAnQi CMS background -> Global settings -> Content settingsFind the corresponding option. After enabling the Markdown editor, the content editor will switch to Markdown mode whether you are publishing articles, creating single-page applications, or editing the descriptions of categories or tags.This means you can directly use Markdown syntax in the content area to create content, and the system will automatically convert it to HTML when saved, laying the foundation for the display of the front-end page.
Second, let the web understand and beautify Markdown
Although the AnQiCMS backend converts Markdown to HTML when saving, in order to make these HTML contents look beautiful, standardized, and have good readability on the front end, it is usually necessary to introduce a dedicated stylesheet.GitHub Markdown CSS is a popular choice that allows your Markdown content to have the elegant formatting of GitHub.
Integrating this stylesheet into your website is very straightforward. You need to find the template file currently in use.base.html(This is a general layout file that includes the website's header, footer, and other common parts, usually located in/template/你的模板目录/below). Inbase.htmlof<head>the tag, add the following<link>Code, include GitHub Markdown CSS:
<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, all the content converted from Markdown on the page will have a unified and beautiful style.
3. Easily integrate mathematical formulas
For scientific, technical, or educational content, the correct display of mathematical formulas is crucial.Plain HTML cannot present complex mathematical expressions well.MathJax is a powerful JavaScript library that can render LaTeX, MathML, or AsciiMath formatted mathematical formulas into high-quality, interactive displays on web pages.
To integrate MathJax into the AnQiCMS page, you also need tobase.htmlPerform operations in the file. After adding the GitHub Markdown CSS at the beginning, at<head>Within the tag (or at the bottom of the page, depending on your considerations for page loading performance and script dependencies), add the MathJax reference script:
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
After the integration is complete, you can write mathematical formulas in Markdown content.MathJax supports a variety of syntaxes, the most commonly used being LaTeX syntax.For example, inline formulas can be used$E=mc^2$Block-level formulas (taking up a line by themselves and centered) can be used$$ \int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2} $$. When the page is loaded, MathJax will automatically detect and render these formulas
4. Draw dynamic flowcharts
Flowcharts, sequence diagrams, and other charts can present complex concepts and processes in a visual way, making the content more vivid and easy to understand.Mermaid.js is a Markdown-based diagram drawing tool that allows you to create various exquisite charts through simple text descriptions.
In order to display Mermaid charts on the AnQiCMS page, you need to introduce the Mermaid.js library and initialize it. Continue inbase.htmlthe file<head>Inside the tag (or at the bottom of the page), add the following JavaScript 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 script will import the Mermaid library and instruct it to automatically find and render charts after the page is loaded.In Markdown content, you can use specific code blocks to create charts.For example, a simple flowchart can be represented as follows:
```mermaid
graph TD;
A[开始] --> B{决策};
B -- 是 --> C[执行];
B -- 否 --> D[结束];
```
Mermaid.js will parse these text blocks and convert them into interactive SVG charts.
V, render Markdown content to the page.
When you enable the Markdown editor in the background and enter content that includes Markdown, mathematical formulas, or flowcharts, AnQiCMS will intelligently convert the Markdown text to HTML format during page rendering. This means that you can use it througharchiveDetail/pageDetailortagDetailThe content called by the tag is usually displayed directly in HTML format, and styles and scripts introduced earlier are automatically applied.
For example, if you want to display Markdown content on the article detail page, you can call the document content field like this:
{% archiveDetail articleContent with name='Content' %}{{articleContent|safe}}{% endarchiveDetail %}
here,articleContentis a variable you have defined,name='Content'specified to retrieve the document'sContentfield.|safeThe filter is crucial, it indicates to the template engine that the output HTML content should be treated as "safe", thus avoiding unnecessary escaping of HTML tags, ensuring that the HTML converted from Markdown can be displayed normally.
It should be noted that AnQiCMS also providesrender=trueParameters can be used in certain situations, such as storing Markdown content through custom fields, or when you want to force Markdown to HTML conversion. For example:
`twig {% archiveDetail archiveContent with name=‘Content’ render=true %}{{archiveContent|