How does the `linenumbers` filter add line number markers to each line of multiline text?

Calendar 👁️ 73

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.

Related articles

How do the `linebreaks` and `linebreaksbr` filters convert newline characters in multi-line text to HTML's `<p>` or `<br/>` tags?

When managing content in Anqi CMS, we often encounter such situations: when the multi-line text entered in the background editing box is displayed on the front-end page, it becomes a single line, or the newline characters are displayed as text.This is because the browser ignores single newline characters (`\n`) by default when rendering HTML.If you want the content to be displayed with paragraph breaks or line breaks like in the editing box, you need to rely on the powerful template filters provided by AnQiCMS, especially `linebreaks` and `linebreaksbr`

2025-11-08

How to get the length of a string, array, or key-value pair in the `length` and `length_is` filters of the Anqi CMS template?

In Anqi CMS template development, it is often necessary to dynamically adjust the display of the page according to the length of the data content.Whether it is to truncate text, judge whether the list is empty, or perform simple content verification, understanding how to obtain the length of strings, arrays, or key-value pairs is the foundation of these functions.AnQi CMS provides the `length` and `length_is` filters, which can help developers flexibly handle these requirements.

2025-11-08

How does the `join` filter concatenate elements of an array into a single string using a specified delimiter?

In Anqi CMS template design, we often encounter the need to integrate a series of data items into a coherent text.For example, we need to display multiple tags (Tag) in one place, or combine a set of custom parameter values obtained from the database.At this point, the `join` filter comes into play, which can efficiently concatenate the elements of an array into a string with the specified separator.### Understand `join`

2025-11-08

How do the `integer` and `float` filters convert strings to integers or floating-point numbers and handle conversion failure situations?

In web template development, flexible handling of data types is the key to ensuring correct content display.We often encounter situations where we need to convert string data obtained from databases or external interfaces into numbers for calculation or formatting display.AnQiCMS (AnQiCMS) fully considers this requirement, providing two built-in filters `integer` and `float` to help users easily convert strings to integers or floating-point numbers, and intelligently handle conversion failure cases, thereby enhancing the robustness of the template.

2025-11-08

How to define a string array variable directly in the template using the `list` filter?

AnQiCMS with its flexible and powerful template engine, provides great convenience for content display.When using templates for front-end development, we often need to handle various data, among which array variables are a common and practical data structure.Most of the time, we may need to define some fixed or temporary string arrays directly in the template, rather than passing them through backend code each time.Fortunately, AnQiCMS provides a very convenient `list` filter, making this operation extremely simple.### Core Function Analysis: `list`

2025-11-08

How does the `phone2numeric` filter convert letters on a mobile phone's numeric keypad to the corresponding numbers?

In AnQiCMS template development, we often need to handle various data, and sometimes we may encounter some special situations with phone number input and display.For example, some phone numbers include letters (also known as "pretty numbers" or "vanity numbers", such as 1-800-FLOWERS) for ease of memorization or brand promotion.However, when dialing in practice, these letters need to be converted to the numbers on the corresponding number keypad.AnQiCMS provides a very practical built-in filter——`phone2numeric`, which helps us easily complete this conversion

2025-11-08

How to use the `random` filter in Anqie CMS template to randomly return a character or value from a string or array?

In AnQi CMS template development, sometimes we hope to add a touch of dynamism and surprise to the website content, so that visitors can see different elements each time they refresh the page.This is a very practical tool, the `random` filter.It can help us randomly select one from a set of predefined data to display, whether it is randomly selecting characters from a string or randomly selecting a value from an array (or list), it can be easily achieved.

2025-11-08

How do the `removetags` and `striptags` filters remove specified or all HTML tags when processing HTML content?

In the daily content operation of AnQi CMS, we often encounter situations where we need to handle HTML content.To display plain text summaries in specific scenarios, or to standardize content output and enhance security, removing HTML tags is a common requirement.AnQi CMS provides two very practical template filters: `removetags` and `striptags`. They each have unique purposes and application scenarios, let us delve into how they help us efficiently clean HTML content.###

2025-11-08