When using AnQiCMS to build a website, we often need to display text with multiple lines, such as article content, product feature descriptions, code snippets, and even message information.How to correctly implement line breaks for these multi-line text on the page, and further add line numbers for some specific content (such as code), is the key to improving the reading experience.It is fortunate that AnQiCMS's powerful template engine provides a very convenient solution, and we can easily achieve these functions by using built-in filters (filters).

Understanding multi-line text in AnQiCMS

In AnQiCMS backend, when you enter multiline text in the content editor (such as in the 'Document Content' area of the 'Publish Document' interface, or in the 'Multiline Text' field created in a custom content model) and press the Enter key, the system will store it as containing newline characters (\nThe English translation of 'auto' is 'English'.However, standard HTML treats multiple consecutive spaces, tabs, and newline characters as a single space.This means that if you output unprocessed text directly in the template, the browser will not display the line breaks you enter in the background.

For example, if you enter in the background:

这是第一行。
这是第二行。

这是第四行（第三行为空行）。

Use it directly in the template:{{ archive.Content }}The output, the browser is likely to display as:这是第一行。 这是第二行。 这是第四行（第三行为空行）。

To solve this problem, AnQiCMS provides a special filter to convert newline characters in text to HTML newline tags that browsers can recognize.

Implement text line break processing

AnQiCMS template provides two commonly used filters to handle the line break needs of multi-line text, each with its own focus, and can be flexibly selected according to the actual situation.

1. Basic line break: UselinebreaksbrFilter

linebreaksbrThe filter is the most direct way to handle line breaks. Its function is to replace each separate newline character in the text with HTML's\n) simply.<br/>Label.This is very suitable for scenarios where you only want to achieve natural vertical separation of text without forming a strict HTML paragraph structure, such as some brief descriptions, list items, or address information.

The method of use is very intuitive, you just need to add it after the variable you need to process|linebreaksbrThe filter can be applied. Additionally, since this filter generates HTML tags, you also need to add it at the end of the filter chain in order for the browser to correctly parse and display these tags.|safeFilter.

{# 假设有一个多行文本变量 `item.Description` #}
<div>
    {{ item.Description | linebreaksbr | safe }}
</div>

{# 如果是文档内容字段，且后台未开启Markdown处理 #}
<article>
    <h1>{{ archive.Title }}</h1>
    <div>
        {{ archive.Content | linebreaksbr | safe }}
    </div>
</article>

After such processing, each line of text you input on the backend will be displayed independently on the front-end page, achieving a clear line break effect.

2. Paragraph-style line break: uselinebreaksFilter

If your need is more inclined towards structured paragraph display,linebreaksthe filter will be a better choice. It not only replaces single newline characters with<br/>Label, it will also replace two or more consecutive newline characters (usually representing a blank line) with HTML's<p>and</p>Label.This helps to automatically organize longer text content into paragraphs that comply with HTML semantics, which is especially suitable for content that requires good reading structure, such as article main text and product detailed descriptions.

Withlinebreaksbris similar,linebreaksThe filter also needs to be with|safeFilter in combination, to ensure that the generated HTML tags can be correctly rendered by the browser.

{# 假设有一个多行文本变量 `longText` #}
<section>
    {{ longText | linebreaks | safe }}
</section>

{# 如果是文档内容字段，且后台未开启Markdown处理 #}
<article>
    <h1>{{ archive.Title }}</h1>
    <div class="article-content">
        {{ archive.Content | linebreaks | safe }}
    </div>
</article>

UselinebreaksAfter filtering, your multi-line text will be presented in a more standardized paragraph format, enhancing the readability and page structure of the content.

Enable line number display

For scenarios that require line numbering, such as displaying code examples, log outputs, or detailed step lists, AnQiCMS provideslinenumbersFilter. This filter will automatically add line number prefixes to each line of text, with the default format being1./2.etc.

linenumbersThe filter is often used in combination with other line feed filters to ensure that line numbers are correctly matched to each line of content. Similarly, as it generates HTML structure (for example<pre>and<code>Label, as well as line number), you still need to add|safea filter to ensure the browser parses it correctly.

{# 假设有一个代码片段存储在 `archive.CodeSnippet` 自定义字段中 #}
<pre class="code-block">
    <code>{{ archive.CodeSnippet | linenumbers | safe }}</code>
</pre>

{# 也可以结合换行过滤器，确保文本在添加行号前已经有正确的换行结构 #}
<div class="log-output">
    {{ archive.LogContent | linebreaksbr | linenumbers | safe }}
</div>

PasslinenumbersFilter, it allows the multi-line content that was originally plain text to come alive, making it convenient for readers to track and cite specific lines.

Consideration of practical application scenarios

  • The content of the article and Markdown:AnQiCMS supports enabling the Markdown editor to write article content. If your content (such asarchive.ContentIt is written by Markdown editor, then Markdown itself will handle the line breaks and paragraph structure of the text and convert it to HTML. In this case, it is directly usedlinebreaksorlinebreaksbrThe filter may not be necessary, even it may produce unexpected effects. However,linenumbersThe filter can still number the plain text content (visible text lines) converted from Markdown, which may be useful in some special layouts.
  • Code snippet:For situations where code needs to be displayed on the website, we recommend that you create a special “multi” in the content model.