[{"data":1,"prerenderedAt":80},["Reactive",2],{"blog-post-how-to-add-line-numbers-to-code-blocks-in-markdown":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":55,"related":56},"how-to-add-line-numbers-to-code-blocks-in-markdown","How to Add Line Numbers to Code Blocks in Markdown: Complete Guide","Learn how to display line numbers in Markdown code blocks using GitHub, Jekyll, Hugo, and other platforms. Includes syntax highlighting and customization options.","Line numbers in code blocks significantly improve code readability and make it easier to reference specific lines in documentation, tutorials, and code reviews. While standard Markdown doesn't…","2025-08-13","Tutorial","Matthew Rathbone","markdown line numbers, code block line numbers, markdown syntax highlighting, numbered code blocks, markdown programming examples",6,"\u003Cp>Line numbers in code blocks significantly improve code readability and make it easier to reference specific lines in documentation, tutorials, and code reviews. While standard Markdown doesn't include built-in line numbering, various platforms and static site generators offer solutions for adding line numbers to your code blocks. This comprehensive guide covers all the methods and platforms that support numbered code blocks.\u003C/p>\n\u003Ch2 id=\"why-use-line-numbers-in-code-blocks\">Why Use Line Numbers in Code Blocks?\u003C/h2>\n\u003Cp>Line numbers provide several important benefits for technical documentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Easy Reference\u003C/strong>: Quickly identify and discuss specific lines of code\u003C/li>\n\u003Cli>\u003Cstrong>Debugging Support\u003C/strong>: Help readers locate errors and issues in examples\u003C/li>\n\u003Cli>\u003Cstrong>Educational Value\u003C/strong>: Assist in explaining code flow and structure step-by-step\u003C/li>\n\u003Cli>\u003Cstrong>Professional Appearance\u003C/strong>: Create polished, publication-ready code examples\u003C/li>\n\u003Cli>\u003Cstrong>Code Reviews\u003C/strong>: Facilitate discussion and feedback on specific code sections\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"github-and-gitlab-support\">GitHub and GitLab Support\u003C/h2>\n\u003Ch3 id=\"github-code-blocks\">GitHub Code Blocks\u003C/h3>\n\u003Cp>GitHub automatically adds line numbers to code blocks in certain contexts, but you cannot manually enable them in standard Markdown. However, GitHub displays line numbers when:\u003C/p>\n\u003Cul>\n\u003Cli>Viewing code files directly in the repository\u003C/li>\n\u003Cli>Using the blame view\u003C/li>\n\u003Cli>Creating code permalinks\u003C/li>\n\u003C/ul>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-code\">```python\ndef calculate_fibonacci(n):\n    if n <= 1:\n        return n\n    return calculate_fibonacci(n-1) + calculate_fibonacci(n-2)\n\n# Generate first 10 Fibonacci numbers\nfor i in range(10):\n    print(f"F({i}) = {calculate_fibonacci(i)}")\n```\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"gitlab-enhanced-features\">GitLab Enhanced Features\u003C/h3>\n\u003Cp>GitLab provides more options for code block enhancement:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-code\">```python{.line-numbers}\ndef merge_sort(arr):\n    if len(arr) <= 1:\n        return arr\n    \n    mid = len(arr) // 2\n    left = merge_sort(arr[:mid])\n    right = merge_sort(arr[mid:])\n    \n    return merge(left, right)\n```\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"jekyll-implementation\">Jekyll Implementation\u003C/h2>\n\u003Cp>Jekyll sites can enable line numbers through various syntax highlighter configurations.\u003C/p>\n\u003Ch3 id=\"using-rouge-highlighter\">Using Rouge Highlighter\u003C/h3>\n\u003Cp>Rouge is Jekyll's default syntax highlighter and supports line numbers:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-yaml\">\u003Cspan class=\"hljs-comment\"># _config.yml\u003C/span>\n\u003Cspan class=\"hljs-attr\">highlighter:\u003C/span> \u003Cspan class=\"hljs-string\">rouge\u003C/span>\n\u003Cspan class=\"hljs-attr\">kramdown:\u003C/span>\n  \u003Cspan class=\"hljs-attr\">syntax_highlighter:\u003C/span> \u003Cspan class=\"hljs-string\">rouge\u003C/span>\n  \u003Cspan class=\"hljs-attr\">syntax_highlighter_opts:\u003C/span>\n    \u003Cspan class=\"hljs-attr\">line_numbers:\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"liquid-tags-for-code-blocks\">Liquid Tags for Code Blocks\u003C/h3>\n\u003Cp>Jekyll supports Liquid tags for more control over code highlighting:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-liquid\">{% highlight python linenos %}\ndef binary_search(arr, target):\n    left, right = 0, len(arr) - 1\n    \n    while left <= right:\n        mid = (left + right) // 2\n        if arr[mid] == target:\n            return mid\n        elif arr[mid] < target:\n            left = mid + 1\n        else:\n            right = mid - 1\n    \n    return -1\n{% endhighlight %}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"custom-css-for-line-numbers\">Custom CSS for Line Numbers\u003C/h3>\n\u003Cp>You can style Jekyll line numbers with custom CSS:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-selector-class\">.highlight\u003C/span> \u003Cspan class=\"hljs-selector-class\">.lineno\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#999\u003C/span>;\n  user-select: none;\n  \u003Cspan class=\"hljs-attribute\">padding-right\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#eee\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.highlight\u003C/span> pre {\n  \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f8f8\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">5px\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"hugo-static-site-generator\">Hugo Static Site Generator\u003C/h2>\n\u003Cp>Hugo provides excellent support for line numbers through its built-in syntax highlighting.\u003C/p>\n\u003Ch3 id=\"hugo-configuration\">Hugo Configuration\u003C/h3>\n\u003Cp>Enable line numbers globally in your Hugo config:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-yaml\">\u003Cspan class=\"hljs-comment\"># config.yml\u003C/span>\n\u003Cspan class=\"hljs-attr\">markup:\u003C/span>\n  \u003Cspan class=\"hljs-attr\">highlight:\u003C/span>\n    \u003Cspan class=\"hljs-attr\">lineNos:\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>\n    \u003Cspan class=\"hljs-attr\">lineNumbersInTable:\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>\n    \u003Cspan class=\"hljs-attr\">style:\u003C/span> \u003Cspan class=\"hljs-string\">github\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"shortcode-implementation\">Shortcode Implementation\u003C/h3>\n\u003Cp>Use Hugo's highlight shortcode for individual code blocks:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\n{{< highlight python "linenos=true,linenostart=1" >}}\nclass DataProcessor:\n\u003Cspan class=\"hljs-code\">    def __init__(self, data):\n        self.data = data\n        self.processed = False\n    \n    def validate(self):\n        if not isinstance(self.data, list):\n            raise ValueError("Data must be a list")\n        return True\n    \n    def process(self):\n        if self.validate():\n            self.data = [x * 2 for x in self.data]\n            self.processed = True\n        return self.data\n{{< /highlight >}}\n\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"starting-line-numbers\">Starting Line Numbers\u003C/h3>\n\u003Cp>Specify custom starting line numbers:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\n{{< highlight javascript "linenos=true,linenostart=42" >}}\nfunction calculateTotal(items) {\n\u003Cspan class=\"hljs-code\">    return items.reduce((sum, item) => {\n        return sum + (item.price * item.quantity);\n    }, 0);\n}\n{{< /highlight >}}\n\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"prismjs-implementation\">Prism.js Implementation\u003C/h2>\n\u003Cp>Prism.js is a popular syntax highlighting library that supports line numbers.\u003C/p>\n\u003Ch3 id=\"basic-setup\">Basic Setup\u003C/h3>\n\u003Cp>Include Prism.js with the line numbers plugin:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- CSS -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">link\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css"\u003C/span> \u003Cspan class=\"hljs-attr\">rel\u003C/span>=\u003Cspan class=\"hljs-string\">"stylesheet"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">link\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css"\u003C/span> \u003Cspan class=\"hljs-attr\">rel\u003C/span>=\u003Cspan class=\"hljs-string\">"stylesheet"\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- JavaScript -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"html-structure\">HTML Structure\u003C/h3>\n\u003Cp>Create code blocks with line numbers class:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">pre\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"line-numbers"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"language-python"\u003C/span>>\u003C/span>\ndef quicksort(arr):\n    if len(arr) <= 1:\n        return arr\n    \n    pivot = arr[len(arr) // 2]\n    left = [x for x in arr if x < pivot]\n    middle = [x for x in arr if x == pivot]\n    right = [x for x in arr if x > pivot]\n    \n    return quicksort(left) + middle + quicksort(right)\n\n# Example usage\nnumbers = [3, 6, 8, 10, 1, 2, 1]\nsorted_numbers = quicksort(numbers)\nprint(sorted_numbers)\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"highlightjs-configuration\">Highlight.js Configuration\u003C/h2>\n\u003Cp>Highlight.js is another popular option for syntax highlighting with line number support.\u003C/p>\n\u003Ch3 id=\"installation-and-setup\">Installation and Setup\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">link\u003C/span> \u003Cspan class=\"hljs-attr\">rel\u003C/span>=\u003Cspan class=\"hljs-string\">"stylesheet"\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\u003Cspan class=\"language-javascript\">\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">event\u003C/span>) =>\u003C/span> {\n  hljs.\u003Cspan class=\"hljs-title function_\">highlightAll\u003C/span>();\n  \n  \u003Cspan class=\"hljs-comment\">// Add line numbers\u003C/span>\n  \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'pre code'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">block\u003C/span>) =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = block.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span>.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> numberedLines = lines.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">line, index\u003C/span>) =>\u003C/span> \n      \u003Cspan class=\"hljs-string\">`<span class="line-number">\u003Cspan class=\"hljs-subst\">${index + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span></span>\u003Cspan class=\"hljs-subst\">${line}\u003C/span>`\u003C/span>\n    );\n    block.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = numberedLines.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n  });\n});\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"custom-line-number-styling\">Custom Line Number Styling\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-selector-class\">.line-number\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n  user-select: none;\n  \u003Cspan class=\"hljs-attribute\">border-right\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ddd\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-right\u003C/span>: \u003Cspan class=\"hljs-number\">0.5em\u003C/span>;\n}\n\npre \u003Cspan class=\"hljs-selector-tag\">code\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f8f8\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"platform-specific-solutions\">Platform-Specific Solutions\u003C/h2>\n\u003Ch3 id=\"notion\">Notion\u003C/h3>\n\u003Cp>Notion automatically provides line numbers for code blocks:\u003C/p>\n\u003Col>\n\u003Cli>Type \u003Ccode>/code\u003C/code> to create a code block\u003C/li>\n\u003Cli>Select your programming language\u003C/li>\n\u003Cli>Line numbers appear automatically for blocks with multiple lines\u003C/li>\n\u003C/ol>\n\u003Ch3 id=\"obsidian\">Obsidian\u003C/h3>\n\u003Cp>Obsidian supports line numbers through CSS snippets:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Add to .obsidian/snippets/line-numbers.css */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.HyperMD-codeblock\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">counter-reset\u003C/span>: line;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.HyperMD-codeblock\u003C/span> \u003Cspan class=\"hljs-selector-class\">.cm-line\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">counter-increment\u003C/span>: line;\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-built_in\">counter\u003C/span>(line);\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-block;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">2em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">1em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#999\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"typora\">Typora\u003C/h3>\n\u003Cp>Typora enables line numbers through preferences:\u003C/p>\n\u003Col>\n\u003Cli>Go to File → Preferences\u003C/li>\n\u003Cli>Select "Markdown" tab\u003C/li>\n\u003Cli>Enable "Display line numbers for code fences"\u003C/li>\n\u003C/ol>\n\u003Ch2 id=\"advanced-customization-techniques\">Advanced Customization Techniques\u003C/h2>\n\u003Ch3 id=\"highlighting-specific-lines\">Highlighting Specific Lines\u003C/h3>\n\u003Cp>Many platforms support highlighting specific lines:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-code\">```python{1,3-5}\ndef example_function():\n    """This function demonstrates line highlighting"""\n    important_var = "This line is highlighted"\n    another_important = "This too"\n    normal_line = "This is normal"\n    return important_var\n```\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"custom-line-number-ranges\">Custom Line Number Ranges\u003C/h3>\n\u003Cp>Start numbering from specific values:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-code\">```python{numberLines: true, startFrom: 100}\ndef advanced_algorithm(data):\n    # Implementation starts at line 100\n    processed_data = []\n    for item in data:\n        result = complex_operation(item)\n        processed_data.append(result)\n    return processed_data\n```\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"responsive-line-numbers\">Responsive Line Numbers\u003C/h3>\n\u003Cp>CSS for mobile-friendly line numbers:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.line-numbers\u003C/span> \u003Cspan class=\"hljs-selector-class\">.line-numbers-rows\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.line-numbers\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n  \u003Cspan class=\"hljs-selector-class\">.line-numbers\u003C/span> \u003Cspan class=\"hljs-selector-class\">.line-numbers-rows\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"troubleshooting-common-issues\">Troubleshooting Common Issues\u003C/h2>\n\u003Ch3 id=\"line-numbers-not-displaying\">Line Numbers Not Displaying\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Line numbers don't appear despite configuration\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Col>\n\u003Cli>Verify CSS and JavaScript files are loaded correctly\u003C/li>\n\u003Cli>Check browser console for errors\u003C/li>\n\u003Cli>Ensure proper HTML structure is maintained\u003C/li>\n\u003Cli>Test with simpler examples first\u003C/li>\n\u003C/ol>\n\u003Ch3 id=\"styling-conflicts\">Styling Conflicts\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Line numbers appear but with incorrect styling\u003C/p>\n\u003Cp>\u003Cstrong>Solution\u003C/strong>: Use more specific CSS selectors:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* More specific targeting */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.highlight\u003C/span> pre \u003Cspan class=\"hljs-selector-class\">.lineno\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.language-python\u003C/span> \u003Cspan class=\"hljs-selector-class\">.line-numbers-rows\u003C/span> > \u003Cspan class=\"hljs-selector-tag\">span\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'Monaco'\u003C/span>, \u003Cspan class=\"hljs-string\">'Consolas'\u003C/span>, monospace;\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"mobile-display-issues\">Mobile Display Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Line numbers cause horizontal scrolling on mobile\u003C/p>\n\u003Cp>\u003Cstrong>Solution\u003C/strong>: Implement responsive design:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-selector-class\">.code-container\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n  \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">480px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.line-numbers\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.line-numbers\u003C/span> \u003Cspan class=\"hljs-selector-class\">.line-numbers-rows\u003C/span> > \u003Cspan class=\"hljs-selector-tag\">span\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding-right\u003C/span>: \u003Cspan class=\"hljs-number\">0.3em\u003C/span>;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"best-practices\">Best Practices\u003C/h2>\n\u003Ch3 id=\"when-to-use-line-numbers\">When to Use Line Numbers\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Educational Content\u003C/strong>: Tutorials explaining code step-by-step\u003C/li>\n\u003Cli>\u003Cstrong>Code Reviews\u003C/strong>: When discussing specific implementation details\u003C/li>\n\u003Cli>\u003Cstrong>Error Documentation\u003C/strong>: Showing exactly where problems occur\u003C/li>\n\u003Cli>\u003Cstrong>Long Code Examples\u003C/strong>: Files with more than 10-15 lines\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"when-to-avoid-line-numbers\">When to Avoid Line Numbers\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Short Snippets\u003C/strong>: Simple examples with fewer than 5 lines\u003C/li>\n\u003Cli>\u003Cstrong>Mobile-First Content\u003C/strong>: When targeting primarily mobile users\u003C/li>\n\u003Cli>\u003Cstrong>Print Documentation\u003C/strong>: Line numbers may not print well\u003C/li>\n\u003Cli>\u003Cstrong>Embedded Code\u003C/strong>: When code blocks are part of flowing text\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"accessibility-considerations\">Accessibility Considerations\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Add accessibility attributes -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">pre\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Code example with line numbers"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">code\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"language-python line-numbers"\u003C/span>>\u003C/span>\ndef accessible_function():\n    """Screen readers can navigate this code"""\n    return "accessible content"\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">code\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">pre\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-workflows\">Integration with Documentation Workflows\u003C/h2>\n\u003Cp>Line numbers work excellently with other Markdown documentation features. When creating comprehensive guides, consider combining numbered code blocks with \u003Ca href=\"/blog/markdown-collapsible-sections-guide\">collapsible sections\u003C/a> to organize large code examples, or use them alongside \u003Ca href=\"/blog/how-to-create-table-of-contents-in-markdown\">table of contents\u003C/a> for better navigation through lengthy technical documentation.\u003C/p>\n\u003Cp>For mathematical content that includes code implementations, line numbers complement \u003Ca href=\"/blog/markdown-math-expressions-complete-guide\">math expressions in Markdown\u003C/a> by providing clear references to algorithm implementations and formula derivations.\u003C/p>\n\u003Ch2 id=\"performance-considerations\">Performance Considerations\u003C/h2>\n\u003Ch3 id=\"client-side-vs-server-side\">Client-Side vs Server-Side\u003C/h3>\n\u003Cp>\u003Cstrong>Server-side rendering\u003C/strong> (Hugo, Jekyll):\u003C/p>\n\u003Cul>\n\u003Cli>Faster page loads\u003C/li>\n\u003Cli>Better SEO\u003C/li>\n\u003Cli>No JavaScript dependencies\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Cstrong>Client-side rendering\u003C/strong> (Prism.js, Highlight.js):\u003C/p>\n\u003Cul>\n\u003Cli>More flexible customization\u003C/li>\n\u003Cli>Dynamic content support\u003C/li>\n\u003Cli>Requires JavaScript\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"optimization-tips\">Optimization Tips\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Lazy load syntax highlighting\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">entries\u003C/span>) =>\u003C/span> {\n  entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (entry.\u003Cspan class=\"hljs-property\">isIntersecting\u003C/span>) {\n      hljs.\u003Cspan class=\"hljs-title function_\">highlightBlock\u003C/span>(entry.\u003Cspan class=\"hljs-property\">target\u003C/span>);\n      observer.\u003Cspan class=\"hljs-title function_\">unobserve\u003C/span>(entry.\u003Cspan class=\"hljs-property\">target\u003C/span>);\n    }\n  });\n});\n\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'pre code'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">block\u003C/span> =>\u003C/span> {\n  observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(block);\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Line numbers in Markdown code blocks enhance the readability and usability of technical documentation across multiple platforms and use cases. Whether you're using Jekyll for a blog, Hugo for documentation, or client-side libraries for dynamic content, there are robust solutions available for every scenario.\u003C/p>\n\u003Cp>Choose the implementation that best fits your platform and requirements, considering factors like performance, customization needs, and target audience. Remember to test your line number implementation across different devices and browsers to ensure a consistent experience for all users.\u003C/p>\n\u003Cp>With properly implemented line numbers, your code examples become more professional, accessible, and valuable to readers who need to reference, discuss, or debug the code you're presenting.\u003C/p>\n",[15,19,22,25,28,31,34,37,40,43,46,49,52],{"id":16,"text":17,"level":18},"why-use-line-numbers-in-code-blocks","Why Use Line Numbers in Code Blocks?",2,{"id":20,"text":21,"level":18},"github-and-gitlab-support","GitHub and GitLab Support",{"id":23,"text":24,"level":18},"jekyll-implementation","Jekyll Implementation",{"id":26,"text":27,"level":18},"hugo-static-site-generator","Hugo Static Site Generator",{"id":29,"text":30,"level":18},"prismjs-implementation","Prism.js Implementation",{"id":32,"text":33,"level":18},"highlightjs-configuration","Highlight.js Configuration",{"id":35,"text":36,"level":18},"platform-specific-solutions","Platform-Specific Solutions",{"id":38,"text":39,"level":18},"advanced-customization-techniques","Advanced Customization Techniques",{"id":41,"text":42,"level":18},"troubleshooting-common-issues","Troubleshooting Common Issues",{"id":44,"text":45,"level":18},"best-practices","Best Practices",{"id":47,"text":48,"level":18},"integration-with-documentation-workflows","Integration with Documentation Workflows",{"id":50,"text":51,"level":18},"performance-considerations","Performance Considerations",{"id":53,"text":54,"level":18},"conclusion","Conclusion",[],[57,65,73],{"slug":58,"title":59,"description":60,"excerpt":61,"date":62,"category":9,"author":10,"keywords":63,"readingMinutes":64},"markdown-line-numbers-code-blocks-complete-guide","Markdown Line Numbers in Code Blocks: Complete Guide for Enhanced Code Documentation","Master line numbering in Markdown code blocks for better code documentation. Learn platform-specific implementations, CSS styling, JavaScript solutions, and accessibility considerations for technical content.","Line numbers in Markdown code blocks transform simple code examples into professional, navigable documentation that enhances readability and enables precise reference communication. While standard…","2025-09-06","markdown line numbers, code block line numbers, markdown syntax highlighting, code documentation, technical writing, programming tutorials, code examples",21,{"slug":66,"title":67,"description":68,"excerpt":69,"date":70,"category":9,"author":10,"keywords":71,"readingMinutes":72},"markdown-syntax-highlighting-complete-guide","Markdown Syntax Highlighting: Complete Guide for Code Blocks","Master syntax highlighting in Markdown code blocks across platforms. Learn language identifiers, custom highlighting, and platform-specific features for better code presentation.","Code blocks are one of Markdown's most powerful features for technical writing, and syntax highlighting transforms plain code into readable, professionally formatted content. Understanding how to…","2025-08-18","markdown syntax highlighting, markdown code blocks, language highlighting, code formatting markdown, syntax coloring markdown, programming language markdown",8,{"slug":74,"title":75,"description":76,"excerpt":77,"date":78,"category":9,"author":10,"keywords":79,"readingMinutes":18},"markdown-escape-backticks","How to Escape Backticks in Markdown for Code Blocks","Learn how to escape backticks in Markdown to correctly format code blocks. This guide provides simple examples and solutions.","One of the most common issues developers encounter when writing in Markdown concerns the use of backticks. Backticks () are used in Markdown to denote code blocks, but what if you want to use a…","2024-07-13","Markdown escape backticks",1792184940802]