In website content display, sometimes we need to add line numbers to specific multiline text content, such as code examples, step-by-step tutorials, or log information, to enhance readability and facilitate reference. AnQiCMS (AnQiCMS) provides a concise 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 marks to each line of multiline text.It will start from number 1, numbering each line of text in order, and adding a period and space after the line number (such as “1. “), making the text content clear and easy to understand.This feature is particularly important for displaying structured text, especially for content that has independent meaning on a line-by-line basis.

How to use in the templatelinenumbersFilter

In the AnQi CMS template system, uselinenumbersThe filter is very intuitive. You just need to input the text content that needs to be numbered and then through the pipe character|连接linenumbersthe filter.

Its basic syntax is:

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

Here你的文本变量It is a variable that stores multi-line text content. After this filter is applied, the template engine automatically detects line breaks in the text and generates a line number for each line.

Actual application example

Assuming you have a template variablecodeSnippetThis 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 template:linenumbersFilter:

{% 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>Apply to retain the original format of the code, including spaces and line breaks.linenumbersThe final effect displayed on the page after the filter is:

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

You can see that each line of text is automatically numbered starting from 1 and presented in the format 'number. ', which greatly improves the readability of the code snippet.

Application scenarios and precautions

linenumbersThe filter is very suitable for use in technical documents, tutorials, code demonstrations, configuration file examples, or any text that needs to be referenced and analyzed line by line.It makes your website content more professional and easy to understand.

Ensure that it is usedlinenumbersThe object on which the filter operates is a string containing a newline character\n). If the text itself does not contain a newline character, it will be treated as a single line.

Frequently Asked Questions (FAQ)

1.linenumbersDoes the filter support custom starting numbers or formats for line numbers?

CurrentlylinenumbersThe filter is designed to be simple and easy to use, numbered by default starting from the number 1, and the format is fixed as "number. ".If your requirement is to customize the starting number of line numbers or change the display format of line numbers (for example, without points, or filled with zeros in front),linenumbersThe filter itself does not support these advanced customizations. In this case, you may need to consider pre-processing the text at the source of the content, 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 a line. For example,<div>Hello</div>it will be considered as a single line. Usually,linenumbersThe filter is best suited for pure text (such as code snippets, log files) or text that has already been HTML-escaped.If you want to add line numbers to the visual lines rendered by HTML, it will be a more complex requirement, possibly requiring the use of a frontend JS library or more refined content parsing on the server side.

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

These three filters are related to the processing of multiline text, but they have different focuses in terms of functionality:

  • linenumbers：Used to add incremental line number markers to each line of multi-line text (e.g. “1. “, “2. “).
  • linebreaks: Replace line breaks in the text (\n)to HTML paragraph tags<p>and newline tags<br/>，to better present the paragraph structure of text on the web.
  • linebreaksbr：Simply replace the line breaks in the text (\n) with the HTML line break tag<br/>, and no additional line breaks will be added<p>Tags. They can be combined according to specific needs. For example, if you need a plain text code block with line numbers,linenumbersit is enough to accomplish the task.