How can I insert and display mathematical formulas on the Anqi CMS web page?
As a senior CMS website operation personnel in the field of information security, I am well aware that how to efficiently present various complex information, especially mathematical formulas, is crucial for enhancing the professionalism and attractiveness of the content.Our AnQi CMS has integrated a Markdown editor in its new version, providing us with the ability to elegantly insert and display mathematical formulas on web pages.This is due to its flexible template mechanism and good compatibility with third-party libraries.
Enable Markdown editor to lay the foundation for formulas
To display mathematical formulas in AnQi CMS, first make sure the content editor supports Markdown syntax.The Markdown editor not only makes content creation more efficient and convenient, but also provides a standard text format for inserting mathematical formulas.
You can navigate to the Anqi CMS backend by accessingGlobal Settingsand then clickContent settingsOption.Here, you will find an option to enable or disable the Markdown editor.Make sure this option is enabled so that you can use Markdown syntax to write content, including mathematical formulas when creating or editing documents.
Integrate MathJax to illuminate the display of mathematical formulas
The rendering of mathematical formulas is not a native feature supported by browsers, we need to use special JavaScript libraries to convert them into beautiful and readable layouts.MathJax is a widely popular solution that can render mathematical expressions in LaTeX, MathML, or AsciiMath formats into high-quality images or HTML elements.
In order for the Anqi CMS website to display MathJax-rendered mathematical formulas correctly, you need to include the MathJax library in the website template files. Typically, we would include it in the public header template file of the website, such asbase.html(The specific filename may vary depending on the template you are using, but it is usually the common template inherited by all pages) make the modification.
Please find the directory of the template you are currently using.base.htmlFile. You can find and edit template files through the Anq CMS backend.template designfunction. In the file, add the following in the tag.<head>tag, add the following.<script>Tags:
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
This script will asynchronously load the MathJax library and automatically identify and render mathematical formulas in the page content after the page content is fully loaded.
Insert mathematical formulas into the content
After completing the integration of MathJax, you can directly write mathematical formulas in the Anqi CMS Markdown editor. MathJax supports various formula syntaxes, the most commonly used being LaTeX syntax:
Inline Math formula: Used to embed brief mathematical expressions in a paragraph of text. You can use a single dollar sign
$to enclose the formula, for example:$E=mc^2$It will render as (E=mc^2).Block formula (Display Math): Used for independent lines of more complex mathematical expressions. You can use double dollar signs.
$$to enclose the formula, for example:$$\int_a^b f(x) dx = F(b) - F(a)$$It will be rendered as: [\int_a^b f(x) dx = F(b) - F(a)]
In the Markdown editor, you can write content that includes formulas like this:
质能方程是物理学中一个著名的公式，它表达了质量和能量之间的关系，通常表示为 $E=mc^2$。
微积分基本定理揭示了求导和积分之间的密切关系，其表达式为：
$$\int_a^b f(x) dx = F(b) - F(a)$$
其中，$F(x)$ 是 $f(x)$ 的一个原函数。
Make sure the Markdown content renders correctly
Although this article mainly focuses on mathematical formulas, it is worth mentioning that if you want the entire Markdown content, including tables, code blocks, and so on, to have a good layout style, you can consider introducing a Markdown stylesheet. For example,github-markdown-cssProvided a Markdown rendering style similar to GitHub.
Similarly, inbase.htmlof<head>tags, you can add the following<link>Tags:
<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 can provide a consistent and beautiful style for all Markdown rendered content. When theContentfield is rendered on the front end (especially whenarchiveDetaillabel'srenderthe parameter totrueWhen this is done, the styles will take effect.
Location and editing notes for the template file.
When making modifications to the above template file, you need to understand the location of the template file. The template root directory of Anqi CMS is usually located at/templateEach template theme will have its own subdirectory containingconfig.jsonfiles and various.htmltemplate files. You need to find the currently active theme'sbase.htmlfiles to edit.
When editing template files, please operate with caution.Incorrect HTML or JavaScript code may cause the website to display abnormally.It is recommended to back up related files before making changes and to verify them in a test environment to ensure that the changes will not affect the normal operation of the website.
By following these steps, your Anqi CMS website will be able to successfully parse and beautifully display embedded mathematical formulas, greatly enhancing the readability and professionalism of the content, allowing your readers to more clearly understand complex mathematical concepts.
Frequently Asked Questions
Ask: I have followed the steps to add the MathJax script, but the mathematical formulas on the page are still displayed as the original LaTeX code. What is the reason for this?
Answer: There are usually several reasons.First, please check whether you have enabled the Markdown editor in the "Global Settings -> Content Settings" of the AnQi CMS backend.If not enabled, the content will not be parsed as Markdown, and MathJax will not be able to recognize formulas.base.htmlof<head>The tag is within and there are no syntax errors that cause the failure.You can try to check the console (Console) in the browser developer tools for any MathJax-related error messages.$or$$Wrap the LaTeX code writing.
Ask: Will the MathJax script affect the website's loading speed? Is there a way to optimize it?
Answer: Any additional JavaScript library will have some impact on the loading speed of the website, but the CDN version of MathJax is usually optimized and usesasyncAsynchronous loading properties, will try to minimize the blocking of page rendering. If you have higher requirements for loading speed, you can consider the following optimization methods: 1.Lazy loading: The MathJax script is only loaded on pages containing mathematical formulas, not on all pages. This requires more complex template logic judgment. 2.Selective component loading: MathJaxtex-mml-chtml.jsis a comprehensive package, you can also load only what you need according to your actual requirementstex-chtml.js(if you only need LaTeX to HTML). 3.self-hosted MathJax: Download the MathJax file to your own server and configure the cache, but this means you need to manually manage updates.For most websites, asynchronous loading through CDN is recommended for balancing convenience and performance.
Ask: Does AnQiCMS support other mathematical formula rendering libraries, such as KaTeX, in addition to MathJax?
Answer: Anqi CMS itself provides content management and template rendering capabilities, and it does not limit you to using specific frontend libraries.In theory, as long as it is a mathematical formula rendering library based on JavaScript and executed in the client browser (such as KaTeX), you can integrate it into your template file in a similar way to MathJax.base.htmlAdd the CDN link or local script of this library to the appropriate template file, and then configure and use it according to its official documentation.The flexibility of AnQi CMS lies in the content and structure it provides for you, and the specific front-end presentation is completely controlled by you through modifying the template.