How to add line number markers for each line of multi-line text using the `linenumbers` filter?

In website content display, we sometimes need to add line numbers to specific multi-line text content, such as code examples, step-by-step tutorials, or log information, to enhance readability and facilitate reference. AnQiCMS (AnQiCMS) provides a simple and practical template filterlinenumbersIt can help us easily achieve this function.

linenumbersThe role of the filter

linenumbersThe filter is specifically used to automatically add line number markers to each line of multi-line text.It will start from number 1, and sequentially number each line of the text, adding a period and space after the line number (for example, "1. “），使文本内容条理清晰，一目了然。This feature is particularly important for displaying structured text, especially for content that has independent meaning on a per-line basis.

How to use in templatelinenumbersFilter

Using in Anqi CMS template systemlinenumbersThe filter is very intuitive. You just need to input the text content that needs to be numbered, and then use the pipe symbol|Connectlinenumbersthe filter.

The basic syntax is:

{{ 你的文本变量 | linenumbers }}

Here are the你的文本变量This is a variable that stores multiple lines of text. When this filter is applied, the template engine automatically detects line breaks in the text and generates corresponding line numbers for each line.

Actual application example

Suppose you have a template variablecodeSnippetwhich includes the following multi-line code:

func main() {
  fmt.Println("Hello, AnQiCMS!")
  // 这是一个注释行
  var message = "欢迎使用安企CMS"
  fmt.Println(message)
}

If you want to display this code with line numbers on the page, you can use it like this in the templatelinenumbersFilter:

{% set codeSnippet = "func main() {\n  fmt.Println(\"Hello, AnQiCMS!\")\n  // 这是一个注释行\n  var message = \"欢迎使用安企CMS\"\n  fmt.Println(message)\n}" %}
<pre>{{ codeSnippet|linenumbers }}</pre>

Here, we use<pre>tags to preserve the original format of the code, including spaces and line breaks. After applyinglinenumbersthe filter, the final effect displayed on the page will be:

1. func main() {
2.   fmt.Println("Hello, AnQiCMS!")
3.   // 这是一个注释行
4.   var message = "欢迎使用安企CMS"
5.   fmt.Println(message)

It can be seen that each line of text is automatically added with an incremental line number starting from 1, presented in the format of 'number. ', which greatly enhances the readability of the code snippet.

Application scenarios and注意事项

linenumbersThe filter is very suitable for technical documents, tutorials, code demonstrations, configuration file examples, or any text content that requires line-by-line referencing and analysis.It makes your website content more professional and easy to understand.

Please ensure it is being used.linenumbersThe object acted on by the filter is a string containing newline characters.\n). If the text itself does not contain newline characters, it will be treated as a single line.

---

Common Questions (FAQ)

1.linenumbersFilter does the custom line number start number or format support?

CurrentlylinenumbersThe filter is designed to be simple and easy to use, numbered by default starting from the number 1, and formatted as 'number.'EnglishlinenumbersThe filter itself does not support these advanced customizations.In this case, you may need to consider pre-processing the text at the content source or implementing a more flexible line number display effect through front-end JavaScript.

2. If the text content contains HTML tags,linenumbershow will the filter handle it?

linenumbersThe filter directly acts on the string content of the text.This means that if your text contains unescaped HTML tags, these tags will also be treated as ordinary characters and numbered as part of the line.<div>Hello</div>it will be considered as a single line. Usually,linenumbersThe filter is most suitable for applying to plain text (such as code snippets, log files) or text that has been HTML-escaped.If you want to add line numbers to the visual line rendered by HTML, it will be a more complex requirement, possibly requiring the use of a frontend JS library or more fine-grained content parsing on the server.

3.linenumbersfilters andlinebreaks/linebreaksbrWhat are the differences between filters?

These filters are all related to the processing of multiline text, but they focus on different functions:

• linenumbers：用于为多行文本的每一行添加递增的行号标记（例如 “1. “, “2. “）。
• linebreaks：将文本中的换行符（English）\n）Convert to HTML paragraph tags<p>and newline tags<br/>，to better present the paragraph structure of text on the web page.
• linebreaksbr：It is simply to replace the newline characters in the text with\n）with HTML line break tags<br/>, will not add<p>tags. They can be combined according to specific requirements. For example, if you need a plain text code block with line numbers,linenumbersit is enough to complete the task.