AnQiCMS deeply understands the creators' longing for efficient and flexible editing tools.The new version introduces a Markdown editor, greatly enhancing the convenience of content publishing.It's even more surprising that AnQiCMS not only supports basic Markdown syntax but also allows complex mathematical formulas and flowcharts to be elegantly presented on your website front end with simple configuration.This is undoubtedly a powerful boost for websites that need to showcase professional knowledge, technical documents, or educational content.

Enable Markdown editing feature

Firstly, you need to ensure that the Markdown editor is enabled in the AnQiCMS backend.Log in to the admin management interface, navigate to the 'Content Settings' option under 'Global Settings'.Here, you will find an option to 'Enable Markdown Editor', check it and save the settings.After completing this step, when you create or edit documents, the content editor will automatically switch to Markdown mode, allowing you to create content using concise and efficient Markdown syntax.

Write Markdown content

In the Markdown editor, you can use it as usual#to represent headings,*or-Represents a list, enclosed in backticks`Represents inline code, enclosed in three backticks`Represents a code block, etc.

For mathematical formulas, you can use LaTeX syntax, which is a widely adopted typesetting language in academic and scientific fields. For example, inline formulas can be enclosed with a single$symbol, such as$E=mc^2$Block-level formulas are enclosed in double$$symbols to make them display independently and centered, such as$$ \int_a^b f(x)dx $$.

For flowcharts, Mermaid syntax is a common choice, allowing you to generate charts with text descriptions. For example, a simple flowchart can be created using the following syntax:

```mermaid
graph TD;
    A[开始] --> B(处理);
    B --> C{判断?};
    C -- 是 --> D[结果1];
    C -- 否 --> E[结果2];
    D --> F(结束);
    E --> F;
```

After entering these contents in the editor, save the document, and then you need to configure the front-end to render these special contents correctly.

The key to front-end rendering: introduce external support libraries.

Although AnQiCMS's Markdown editor accepts and saves these special syntaxes, the browser itself does not directly support their rendering.Therefore, we need to introduce some front-end JavaScript libraries and CSS style sheets to 'translate' these syntaxes and convert them into user-friendly visual content.base.htmlthe file<head>Completed within the tag.

  1. Optimize Markdown StyleIn order to make the content rendered by Markdown more beautiful and the layout more professional on the front-end, you can introducegithub-markdown-cssJust add the following inbase.htmlof<head>.<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 will provide a concise reading experience similar to GitHub for your Markdown content, enhancing the overall visual appeal of the content.

  2. Elegant display of mathematical formulasTo display mathematical formulas written in LaTeX correctly and with professional formatting, we need the MathJax library.base.htmlof<head>Add the following<script>Tags:

    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

    MathJax will asynchronously identify and render LaTeX formulas on the page during loading, converting them into a readable layout style. Whether it's complex calculus or simple algebraic expressions, they can be clearly displayed.

  3. Dynamic presentation of flowchartsThe Mermaid library is responsible for parsing Mermaid syntax into interactive flowcharts or various charts.base.htmlof<head>Add the following<script>Code:

    <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 this code uses ES module imports.After Mermaid initialization, it will intelligently search for Mermaid syntax blocks in the page and convert them into SVG graphics, making your flowchart dynamic and easy to understand.

Actual effect and content value

With these configurations, when your users visit pages containing Markdown text, mathematical formulas, or flowcharts, they will see professionally presented content with beautifully formatted text, clear formulas, and dynamically displayed flowcharts.This not only greatly enhances the professionalism and readability of the content, but also liberates content creators, allowing them to focus on content creation and the transmission of knowledge, without worrying about complex formatting work.This is a leap forward in content display for technical blogs, educational websites, product documentation, or any website that needs to convey complex information, enabling it to more effectively attract and retain readers.

Attention Points and **Practice

  • These externally referenced CDN resources require the user's browser to be able to access them normally.If your target user group has special network environments or security requirements, you may need to consider downloading these JavaScript libraries and CSS files to your local server for deployment to achieve finer control and optimization.
  • After enabling the Markdown editor, the functions and display methods of the original rich text editor will change.Make sure your content team is familiar with Markdown syntax.
  • If you have inserted custom content that needs to be rendered as HTML in Markdown (such as certain special HTML fragments), and you want AnQiCMS to automatically convert it to HTML instead of displaying it as raw Markdown, you can pay attention to the AnQiCMS template tags.Contentfield'srenderparameters, use appropriately|safeFilter.
  • The versions of Mermaid and MathJax libraries will be continuously updated. It is recommended to consult their official documentation when introducing them to understand the latest versions and potential compatibility issues.

Frequently Asked Questions (FAQ)

  1. Q: Why does the front-end still display the original LaTeX code even though I have enabled the Markdown editor and added a formula?A: This is usually because the MathJax library is not loaded or initialized correctly on the front-end page. Please check if you have included the MathJax library correctly inbase.htmlthe file.<script>Ensure that the tag has been used correctly.MathJax-scriptofasyncproperties andsrcThe path is correct. Additionally, please confirm that the LaTeX formula syntax you have written in Markdown is correct, for example, whether inline formulas are using single quotes.$Package, does the block-level formula use double quotes?$$Package.

  2. Q: The flowchart does not display, or the display is the original Mermaid code instead of the graphic?A: In this situation, you need to checkbase.htmlwhether the Mermaid inclusion code is complete and error-free, especiallytype="module"andmermaid.initialize({ startOnLoad: true });These key parts.Ensure that your template environment supports ES module imports.Secondly, please carefully check whether the Mermaid syntax you have written in Markdown is in accordance with the specification, any minor syntax error can lead to rendering failure.Ensure syntax compatibility by referring to the official Mermaid documentation is a good practice.

  3. **Q: Introducing CDN resources will affect the website loading speed