How to write article content using Markdown syntax after enabling the Markdown editor?

As an experienced CMS website operation personnel of an enterprise, I know that efficient content creation and publication is crucial for attracting and retaining users.The newly added Markdown editor of AnQi CMS is the powerful tool that helps us improve work efficiency and optimize content presentation.It allows content creators to focus on the text itself, while entrusting the layout work to the system, ultimately presenting content that is clear in structure and elegant in appearance.

After enabling Markdown editor in AnQi CMS, the way of writing article content will undergo a qualitative leap.We no longer need to rely on complicated rich text editors to adjust fonts, colors, or paragraph formatting; instead, we have a set of simple and intuitive markup languages.This transformation not only accelerates the speed of content creation, but also makes content management and maintenance more convenient.

To begin writing an article using Markdown, you first need to make sure that the feature is already enabled in the background.We can navigate to the "Global Settings" in the AnQi CMS backend and then click the "Content Settings" option.There will be a clear option to enable Markdown editor on this page.Check this option and save the settings, and you will see the Markdown editor in the article editing interface.Once enabled, we can directly use Markdown syntax for content creation when creating or editing articles.

The core of Markdown syntax lies in its simplicity, which uses simple symbols to mark the format of text. For example, to create different levels of headings, we can use 1 to 6 symbols before the text.#Symbol,# 标题一Represents a first-level title,## 标题二Represent a second-level title, etc. Paragraphs are more straightforward, just leave a blank line between paragraphs. When we need to emphasize certain text, we can use**粗体**to bold,*斜体*tilt or~~删除线~~to indicate deletion.

Creating a list is just as easy. An unordered list can be used*/-or+symbols as markers, for example:* 列表项一 * 列表项二An ordered list uses numbers followed by an English period, for example:1. 列表项一 2. 列表项二For hyperlinks, we can use[链接文本](链接地址)in the format, for example:[安企CMS官网](https://en.anqicms.com). To insert an image, add an exclamation mark before the link syntax, like:。若要引用他人的文字，只需在文字前加上`>`符号，形成块引用。当我们需要展示代码时，可以使用反引号` 来包裹行内代码，或者使用三个反引号“To enclose code blocks, you can optionally specify a code language for syntax highlighting.

The AnqiCMS Markdown editor also supports more advanced features, such as the embedding of mathematical formulas and flowcharts, which is particularly useful for content operation on educational, scientific, or data analysis websites.To ensure that these advanced contents can be displayed correctly on the front end, in addition to writing in Markdown syntax on the back end, it is also necessary to introduce the corresponding third-party plugins in the website template.

We can directly use LaTeX syntax in the article content for mathematical formulas, for example:$$E=mc^2$$represents an independent formula, whereas$a^2 + b^2 = c^2$represents an inline formula. To render these formulas correctly on the front end, we need in the website template file (usuallybase.htmlor the header area of the main layout fileMathJaxCDN script as shown in the document:<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

For a flowchart, we can use Mermaid syntax to describe. For example, a simple flowchart may look like this:

graph TD
    A[Start] --> B{Decision};
    B -- Yes --> C[Action 1];
    B -- No --> D[Action 2];
    C --> E[End];
    D --> E;

To display these flowcharts on the front end, you also need to include the Mermaid CDN script in the header of the template file:

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
</script>

After completing these front-end configurations, the mathematical formulas and flowcharts written in the backend Markdown editor can be correctly parsed and presented when users visit the page.

In addition to these functional contents, to ensure that the rendered HTML has a good visual style on the front end, we can also choose to introduce a CSS library. The Anqi CMS documentation recommends introducinggithub-markdown-cssThis is a stylesheet that can provide a GitHub style beautiful formatting for Markdown content. Just add the following link at the top ofbase.htmlthe file.<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 allows our Markdown content to maintain consistent and professional display on different devices and browsers.

In the Anqi CMS template system, we usually usearchiveDetailUse tags to call the article content. When we call the article'sContentfield, this tag supportsrenderparameters to control the conversion from Markdown to HTML. For example,{% archiveDetail archiveContent with name="Content" render=true %}{{archiveContent|safe}}Represents converting Markdown content to HTML and outputting it.By default, if the Markdown editor is enabled, the system will automatically perform the conversion.Understand this mechanism, it helps us better debug and optimize content display.

In summary, the Markdown editor brings significant efficiency improvements and content diversity to website operations in Anqi CMS.It simplifies the creative process, allowing content creators to focus more on information delivery rather than tedious format adjustments.By mastering the basic Markdown syntax and making good use of the advanced features such as mathematical formulas, flowcharts, and corresponding frontend configurations provided by Anqi CMS, our website will be able to publish high-quality content with clear structure, rich information, strong interactivity, and a professional appearance, thereby effectively attracting and retaining users.

Frequently Asked Questions (FAQ)

• Q1: My Markdown content is displayed as raw text on the front end and is not rendered correctly as HTML, why is that?

  • This is usually due to the Markdown editor not being properly enabled in the Anqicms backend, or the article content not being rendered from Markdown to HTML when the template is called.Please first confirm that you have checked the "Enable Markdown Editor" in the "Global Settings" -> "Content Settings".Contentfield, such as{% archiveDetail archiveContent with name="Content" %}The default behavior is to render, or you have explicitly set it.render=trueThe parameter has been used.|safeThe filter is used to avoid HTML from being escaped.

• Q2: Can I mix HTML tags in Markdown?

  • Yes, Markdown was designed from the beginning to be compatible with HTML.You can directly embed HTML tags in Markdown documents, these HTML tags will not be parsed by the Markdown parser and will be output as raw HTML directly to the final page.This means you can take advantage of the flexibility of HTML to handle some complex layouts and styles that Markdown cannot implement or are not convenient to implement.

• Q3: I followed the steps to introduce the CDN script for MathJax or Mermaid, but the mathematical formula or flowchart still does not display normally, how should I troubleshoot?

  • First, please check your network connection to ensure that CDN resources can load normally. Second, carefully check the code of the script being introduced to ensure it is consistent with the one provided in the document, includingasync/id/type="module"properties. Especially for Mermaid,type="module"is crucial. In addition, make sure these scripts are placed in the HTML's<head>or<body>tags (usually placed in the <head>To ensure execution when the page loads).If the problem still exists, you can try to check for any error messages in the browser's developer tools (F12) console, which will help you locate whether the script failed to load, there are syntax errors, or other issues.