Introduction
Pygments is a Python library for syntax highlighting. It supports a vast range of programming languages and text formats, making it a versatile tool for developers who need to add code highlighting to their applications or generate pretty-printed code snippets for documentation.
Table of contents
This tutorial will guide you through the basics of using Pygments, from installation to applying syntax highlighting to your code.
Using Pygments to achieve multicolored syntax highlighting for your code
Installing Pygments
Before you can use Pygments, you'll need to install it. Pygments can be easily installed using pip, Python's package manager. Open your terminal or command prompt and run the following command:
1 | pip install Pygments |
You can also employ it within your Conda environment. For instance, suppose I have a Conda environment called 'websitedev'. I would activate it using 'source activate websitedev' and then execute 'pip install Pygments'. Keep in mind that you need to install pip in your Conda environment first by running 'conda install pip'.
Checking your Pygments version
To check your Pygments version, simply execute the following code:
1 2 3 | import pygments print(pygments.__version__) |
For example, in my situation, I received.
1 | 2.17.2
|
Converting code into formatted HTML
At its core, Pygments works by converting code snippets into formatted HTML with appropriate CSS classes that define the coloring and styling based on the selected syntax theme.
Let's take, for example, the following Python code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | code = """# Import necessary libraries import pandas as pd # Importing pandas library for data manipulation import numpy as np # Importing numpy library for numerical computations # Set random seed for reproducibility np.random.seed(42) # Generate random integer data in the range from -10 to 10 with a shape of 4x3 data = np.random.randint(-10, 10, size=(4, 3)) # Create a pandas DataFrame using the generated random data, with column names 'A', 'B', and 'C' df = pd.DataFrame(data, columns=['A', 'B', 'C']) # Print the DataFrame print(df)""" |
First, you need to import the necessary components from Pygments:
- highlight(): The function used to apply syntax highlighting.
- Lexer: This is responsible for parsing the input code. You select a lexer based on the programming language of your code snippet.
- Formatter: This determines the output format. For simplicity, we will use HTML in this example.
Here's how to import these components:
1 2 3 | from pygments import highlight from pygments.lexers import get_lexer_by_name from pygments.formatters import HtmlFormatter |
Let's proceed to establish a lexer and a formatter:
1 | lexer = get_lexer_by_name("python", stripall=True) |
This line creates a lexer object that specifies how Python code should be parsed for syntax highlighting. The get_lexer_by_name function is used to obtain a lexer specifically designed for Python code. The stripall=True parameter indicates that leading and trailing whitespace should be stripped from the code before highlighting.
1 | formatter = HtmlFormatter(linenos=True, cssclass="code-highlight", style='github-dark') |
This line creates a formatter object that specifies how the highlighted code should be formatted as HTML. The HtmlFormatter class is used to define the formatting options. The linenos=True parameter indicates that line numbers should be included in the output. The cssclass="code-highlight" parameter specifies the CSS class that should be applied to the highlighted code in the HTML document. The style='github-dark' parameter specifies the color scheme or style to be used for highlighting; in this case, it's set to 'github-dark', which refers to a dark-themed style similar to GitHub's dark mode.
You can now apply syntax highlighting to a Python code snippet. Define your code as a string, and use the highlight() function along with the appropriate lexer and formatter:
1 2 3 | highlighted_code = highlight(code, PythonLexer(), HtmlFormatter()) print(highlighted_code) |
The output will be:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <div class="code-highlight"><table class="code-highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal"> 1</span> <span class="normal"> 2</span> <span class="normal"> 3</span> <span class="normal"> 4</span> <span class="normal"> 5</span> <span class="normal"> 6</span> <span class="normal"> 7</span> <span class="normal"> 8</span> <span class="normal"> 9</span> <span class="normal">10</span> <span class="normal">11</span> <span class="normal">12</span> <span class="normal">13</span> <span class="normal">14</span> <span class="normal">15</span></pre></div></td><td class="code"><div><pre><span></span><span class="c1"># Import necessary libraries</span> <span class="kn">import</span> <span class="nn">pandas</span> <span class="k">as</span> <span class="nn">pd</span> <span class="c1"># Importing pandas library for data manipulation</span> <span class="kn">import</span> <span class="nn">numpy</span> <span class="k">as</span> <span class="nn">np</span> <span class="c1"># Importing numpy library for numerical computations</span> <span class="c1"># Set random seed for reproducibility</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">seed</span><span class="p">(</span><span class="mi">42</span><span class="p">)</span> <span class="c1"># Generate random integer data in the range from -10 to 10 with a shape of 4x3</span> <span class="n">data</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">randint</span><span class="p">(</span><span class="o">-</span><span class="mi">10</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="n">size</span><span class="o">=</span><span class="p">(</span><span class="mi">4</span><span class="p">,</span> <span class="mi">3</span><span class="p">))</span> <span class="c1"># Create a pandas DataFrame using the generated random data, with column names 'A', 'B', and 'C'</span> <span class="n">df</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">DataFrame</span><span class="p">(</span><span class="n">data</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="p">[</span><span class="s1">'A'</span><span class="p">,</span> <span class="s1">'B'</span><span class="p">,</span> <span class="s1">'C'</span><span class="p">])</span> <span class="c1"># Print the DataFrame</span> <span class="nb">print</span><span class="p">(</span><span class="n">df</span><span class="p">)</span> </pre></div></td></tr></table></div> |
Note: To access a list of all available styles and their corresponding names, utilize the command provided below.
1 2 3 4 5 | from pygments.styles import get_all_styles styles = list(get_all_styles()) print(styles) |
for version 2.17.2 I got
1 | ['abap', 'algol', 'algol_nu', 'arduino', 'autumn', 'bw', 'borland', 'colorful', 'default', 'dracula', 'emacs', 'friendly_grayscale', 'friendly', 'fruity', 'github-dark', 'gruvbox-dark', 'gruvbox-light', 'igor', 'inkpot', 'lightbulb', 'lilypond', 'lovelace', 'manni', 'material', 'monokai', 'murphy', 'native', 'nord-darker', 'nord', 'one-dark', 'paraiso-dark', 'paraiso-light', 'pastie', 'perldoc', 'rainbow_dash', 'rrt', 'sas', 'solarized-dark', 'solarized-light', 'staroffice', 'stata-dark', 'stata-light', 'tango', 'trac', 'vim', 'vs', 'xcode', 'zenburn'] |
Obtain CSS code
To output the CSS code specific to the selected style, just enter:
1 | formatter.get_style_defs('.code-highlight') |
It's important to note that Pygments only provides the necessary classes and styles for syntax highlighting; any additional customization or styling must be done by you using CSS.
The output will be here:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | pre { line-height: 125%; } td.linenos .normal { color: #6e7681; background-color: #0d1117; padding-left: 5px; padding-right: 5px; } span.linenos { color: #6e7681; background-color: #0d1117; padding-left: 5px; padding-right: 5px; } td.linenos .special { color: #e6edf3; background-color: #6e7681; padding-left: 5px; padding-right: 5px; } span.linenos.special { color: #e6edf3; background-color: #6e7681; padding-left: 5px; padding-right: 5px; } .code-highlight .hll { background-color: #6e7681 } .code-highlight { background: #0d1117; color: #e6edf3 } .code-highlight .c { color: #8b949e; font-style: italic } /* Comment */ .code-highlight .err { color: #f85149 } /* Error */ .code-highlight .esc { color: #e6edf3 } /* Escape */ .code-highlight .g { color: #e6edf3 } /* Generic */ .code-highlight .k { color: #ff7b72 } /* Keyword */ .code-highlight .l { color: #a5d6ff } /* Literal */ .code-highlight .n { color: #e6edf3 } /* Name */ .code-highlight .o { color: #ff7b72; font-weight: bold } /* Operator */ .code-highlight .x { color: #e6edf3 } /* Other */ .code-highlight .p { color: #e6edf3 } /* Punctuation */ .code-highlight .ch { color: #8b949e; font-style: italic } /* Comment.Hashbang */ .code-highlight .cm { color: #8b949e; font-style: italic } /* Comment.Multiline */ .code-highlight .cp { color: #8b949e; font-weight: bold; font-style: italic } /* Comment.Preproc */ .code-highlight .cpf { color: #8b949e; font-style: italic } /* Comment.PreprocFile */ .code-highlight .c1 { color: #8b949e; font-style: italic } /* Comment.Single */ .code-highlight .cs { color: #8b949e; font-weight: bold; font-style: italic } /* Comment.Special */ .code-highlight .gd { color: #ffa198; background-color: #490202 } /* Generic.Deleted */ .code-highlight .ge { color: #e6edf3; font-style: italic } /* Generic.Emph */ .code-highlight .ges { color: #e6edf3; font-weight: bold; font-style: italic } /* Generic.EmphStrong */ .code-highlight .gr { color: #ffa198 } /* Generic.Error */ .code-highlight .gh { color: #79c0ff; font-weight: bold } /* Generic.Heading */ .code-highlight .gi { color: #56d364; background-color: #0f5323 } /* Generic.Inserted */ .code-highlight .go { color: #8b949e } /* Generic.Output */ .code-highlight .gp { color: #8b949e } /* Generic.Prompt */ .code-highlight .gs { color: #e6edf3; font-weight: bold } /* Generic.Strong */ .code-highlight .gu { color: #79c0ff } /* Generic.Subheading */ .code-highlight .gt { color: #ff7b72 } /* Generic.Traceback */ .code-highlight .g-Underline { color: #e6edf3; text-decoration: underline } /* Generic.Underline */ .code-highlight .kc { color: #79c0ff } /* Keyword.Constant */ .code-highlight .kd { color: #ff7b72 } /* Keyword.Declaration */ .code-highlight .kn { color: #ff7b72 } /* Keyword.Namespace */ .code-highlight .kp { color: #79c0ff } /* Keyword.Pseudo */ .code-highlight .kr { color: #ff7b72 } /* Keyword.Reserved */ .code-highlight .kt { color: #ff7b72 } /* Keyword.Type */ .code-highlight .ld { color: #79c0ff } /* Literal.Date */ .code-highlight .m { color: #a5d6ff } /* Literal.Number */ .code-highlight .s { color: #a5d6ff } /* Literal.String */ .code-highlight .na { color: #e6edf3 } /* Name.Attribute */ .code-highlight .nb { color: #e6edf3 } /* Name.Builtin */ .code-highlight .nc { color: #f0883e; font-weight: bold } /* Name.Class */ .code-highlight .no { color: #79c0ff; font-weight: bold } /* Name.Constant */ .code-highlight .nd { color: #d2a8ff; font-weight: bold } /* Name.Decorator */ .code-highlight .ni { color: #ffa657 } /* Name.Entity */ .code-highlight .ne { color: #f0883e; font-weight: bold } /* Name.Exception */ .code-highlight .nf { color: #d2a8ff; font-weight: bold } /* Name.Function */ .code-highlight .nl { color: #79c0ff; font-weight: bold } /* Name.Label */ .code-highlight .nn { color: #ff7b72 } /* Name.Namespace */ .code-highlight .nx { color: #e6edf3 } /* Name.Other */ .code-highlight .py { color: #79c0ff } /* Name.Property */ .code-highlight .nt { color: #7ee787 } /* Name.Tag */ .code-highlight .nv { color: #79c0ff } /* Name.Variable */ .code-highlight .ow { color: #ff7b72; font-weight: bold } /* Operator.Word */ .code-highlight .pm { color: #e6edf3 } /* Punctuation.Marker */ .code-highlight .w { color: #6e7681 } /* Text.Whitespace */ .code-highlight .mb { color: #a5d6ff } /* Literal.Number.Bin */ .code-highlight .mf { color: #a5d6ff } /* Literal.Number.Float */ .code-highlight .mh { color: #a5d6ff } /* Literal.Number.Hex */ .code-highlight .mi { color: #a5d6ff } /* Literal.Number.Integer */ .code-highlight .mo { color: #a5d6ff } /* Literal.Number.Oct */ .code-highlight .sa { color: #79c0ff } /* Literal.String.Affix */ .code-highlight .sb { color: #a5d6ff } /* Literal.String.Backtick */ .code-highlight .sc { color: #a5d6ff } /* Literal.String.Char */ .code-highlight .dl { color: #79c0ff } /* Literal.String.Delimiter */ .code-highlight .sd { color: #a5d6ff } /* Literal.String.Doc */ .code-highlight .s2 { color: #a5d6ff } /* Literal.String.Double */ .code-highlight .se { color: #79c0ff } /* Literal.String.Escape */ .code-highlight .sh { color: #79c0ff } /* Literal.String.Heredoc */ .code-highlight .si { color: #a5d6ff } /* Literal.String.Interpol */ .code-highlight .sx { color: #a5d6ff } /* Literal.String.Other */ .code-highlight .sr { color: #79c0ff } /* Literal.String.Regex */ .code-highlight .s1 { color: #a5d6ff } /* Literal.String.Single */ .code-highlight .ss { color: #a5d6ff } /* Literal.String.Symbol */ .code-highlight .bp { color: #e6edf3 } /* Name.Builtin.Pseudo */ .code-highlight .fm { color: #d2a8ff; font-weight: bold } /* Name.Function.Magic */ .code-highlight .vc { color: #79c0ff } /* Name.Variable.Class */ .code-highlight .vg { color: #79c0ff } /* Name.Variable.Global */ .code-highlight .vi { color: #79c0ff } /* Name.Variable.Instance */ .code-highlight .vm { color: #79c0ff } /* Name.Variable.Magic */ .code-highlight .il { color: #a5d6ff } /* Literal.Number.Integer.Long */ |
Creating an html page
Now, we can create a basic HTML file, such as "main.html," and combine the outputs that we obtained earlier:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | <!DOCTYPE html> <html> <style> pre { line-height: 125%; } td.linenos .normal { color: #6e7681; background-color: #0d1117; padding-left: 5px; padding-right: 5px; } span.linenos { color: #6e7681; background-color: #0d1117; padding-left: 5px; padding-right: 5px; } td.linenos .special { color: #e6edf3; background-color: #6e7681; padding-left: 5px; padding-right: 5px; } span.linenos.special { color: #e6edf3; background-color: #6e7681; padding-left: 5px; padding-right: 5px; } .code-highlight .hll { background-color: #6e7681 } .code-highlight { background: #0d1117; color: #e6edf3 } .code-highlight .c { color: #8b949e; font-style: italic } /* Comment */ .code-highlight .err { color: #f85149 } /* Error */ .code-highlight .esc { color: #e6edf3 } /* Escape */ .code-highlight .g { color: #e6edf3 } /* Generic */ .code-highlight .k { color: #ff7b72 } /* Keyword */ .code-highlight .l { color: #a5d6ff } /* Literal */ .code-highlight .n { color: #e6edf3 } /* Name */ .code-highlight .o { color: #ff7b72; font-weight: bold } /* Operator */ .code-highlight .x { color: #e6edf3 } /* Other */ .code-highlight .p { color: #e6edf3 } /* Punctuation */ .code-highlight .ch { color: #8b949e; font-style: italic } /* Comment.Hashbang */ .code-highlight .cm { color: #8b949e; font-style: italic } /* Comment.Multiline */ .code-highlight .cp { color: #8b949e; font-weight: bold; font-style: italic } /* Comment.Preproc */ .code-highlight .cpf { color: #8b949e; font-style: italic } /* Comment.PreprocFile */ .code-highlight .c1 { color: #8b949e; font-style: italic } /* Comment.Single */ .code-highlight .cs { color: #8b949e; font-weight: bold; font-style: italic } /* Comment.Special */ .code-highlight .gd { color: #ffa198; background-color: #490202 } /* Generic.Deleted */ .code-highlight .ge { color: #e6edf3; font-style: italic } /* Generic.Emph */ .code-highlight .ges { color: #e6edf3; font-weight: bold; font-style: italic } /* Generic.EmphStrong */ .code-highlight .gr { color: #ffa198 } /* Generic.Error */ .code-highlight .gh { color: #79c0ff; font-weight: bold } /* Generic.Heading */ .code-highlight .gi { color: #56d364; background-color: #0f5323 } /* Generic.Inserted */ .code-highlight .go { color: #8b949e } /* Generic.Output */ .code-highlight .gp { color: #8b949e } /* Generic.Prompt */ .code-highlight .gs { color: #e6edf3; font-weight: bold } /* Generic.Strong */ .code-highlight .gu { color: #79c0ff } /* Generic.Subheading */ .code-highlight .gt { color: #ff7b72 } /* Generic.Traceback */ .code-highlight .g-Underline { color: #e6edf3; text-decoration: underline } /* Generic.Underline */ .code-highlight .kc { color: #79c0ff } /* Keyword.Constant */ .code-highlight .kd { color: #ff7b72 } /* Keyword.Declaration */ .code-highlight .kn { color: #ff7b72 } /* Keyword.Namespace */ .code-highlight .kp { color: #79c0ff } /* Keyword.Pseudo */ .code-highlight .kr { color: #ff7b72 } /* Keyword.Reserved */ .code-highlight .kt { color: #ff7b72 } /* Keyword.Type */ .code-highlight .ld { color: #79c0ff } /* Literal.Date */ .code-highlight .m { color: #a5d6ff } /* Literal.Number */ .code-highlight .s { color: #a5d6ff } /* Literal.String */ .code-highlight .na { color: #e6edf3 } /* Name.Attribute */ .code-highlight .nb { color: #e6edf3 } /* Name.Builtin */ .code-highlight .nc { color: #f0883e; font-weight: bold } /* Name.Class */ .code-highlight .no { color: #79c0ff; font-weight: bold } /* Name.Constant */ .code-highlight .nd { color: #d2a8ff; font-weight: bold } /* Name.Decorator */ .code-highlight .ni { color: #ffa657 } /* Name.Entity */ .code-highlight .ne { color: #f0883e; font-weight: bold } /* Name.Exception */ .code-highlight .nf { color: #d2a8ff; font-weight: bold } /* Name.Function */ .code-highlight .nl { color: #79c0ff; font-weight: bold } /* Name.Label */ .code-highlight .nn { color: #ff7b72 } /* Name.Namespace */ .code-highlight .nx { color: #e6edf3 } /* Name.Other */ .code-highlight .py { color: #79c0ff } /* Name.Property */ .code-highlight .nt { color: #7ee787 } /* Name.Tag */ .code-highlight .nv { color: #79c0ff } /* Name.Variable */ .code-highlight .ow { color: #ff7b72; font-weight: bold } /* Operator.Word */ .code-highlight .pm { color: #e6edf3 } /* Punctuation.Marker */ .code-highlight .w { color: #6e7681 } /* Text.Whitespace */ .code-highlight .mb { color: #a5d6ff } /* Literal.Number.Bin */ .code-highlight .mf { color: #a5d6ff } /* Literal.Number.Float */ .code-highlight .mh { color: #a5d6ff } /* Literal.Number.Hex */ .code-highlight .mi { color: #a5d6ff } /* Literal.Number.Integer */ .code-highlight .mo { color: #a5d6ff } /* Literal.Number.Oct */ .code-highlight .sa { color: #79c0ff } /* Literal.String.Affix */ .code-highlight .sb { color: #a5d6ff } /* Literal.String.Backtick */ .code-highlight .sc { color: #a5d6ff } /* Literal.String.Char */ .code-highlight .dl { color: #79c0ff } /* Literal.String.Delimiter */ .code-highlight .sd { color: #a5d6ff } /* Literal.String.Doc */ .code-highlight .s2 { color: #a5d6ff } /* Literal.String.Double */ .code-highlight .se { color: #79c0ff } /* Literal.String.Escape */ .code-highlight .sh { color: #79c0ff } /* Literal.String.Heredoc */ .code-highlight .si { color: #a5d6ff } /* Literal.String.Interpol */ .code-highlight .sx { color: #a5d6ff } /* Literal.String.Other */ .code-highlight .sr { color: #79c0ff } /* Literal.String.Regex */ .code-highlight .s1 { color: #a5d6ff } /* Literal.String.Single */ .code-highlight .ss { color: #a5d6ff } /* Literal.String.Symbol */ .code-highlight .bp { color: #e6edf3 } /* Name.Builtin.Pseudo */ .code-highlight .fm { color: #d2a8ff; font-weight: bold } /* Name.Function.Magic */ .code-highlight .vc { color: #79c0ff } /* Name.Variable.Class */ .code-highlight .vg { color: #79c0ff } /* Name.Variable.Global */ .code-highlight .vi { color: #79c0ff } /* Name.Variable.Instance */ .code-highlight .vm { color: #79c0ff } /* Name.Variable.Magic */ .code-highlight .il { color: #a5d6ff } /* Literal.Number.Integer.Long */ </style> <body> <div class="code-highlight"><table class="code-highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span class="normal"> 1</span> <span class="normal"> 2</span> <span class="normal"> 3</span> <span class="normal"> 4</span> <span class="normal"> 5</span> <span class="normal"> 6</span> <span class="normal"> 7</span> <span class="normal"> 8</span> <span class="normal"> 9</span> <span class="normal">10</span> <span class="normal">11</span> <span class="normal">12</span> <span class="normal">13</span> <span class="normal">14</span> <span class="normal">15</span></pre></div></td><td class="code"><div><pre><span></span><span class="c1"># Import necessary libraries</span> <span class="kn">import</span> <span class="nn">pandas</span> <span class="k">as</span> <span class="nn">pd</span> <span class="c1"># Importing pandas library for data manipulation</span> <span class="kn">import</span> <span class="nn">numpy</span> <span class="k">as</span> <span class="nn">np</span> <span class="c1"># Importing numpy library for numerical computations</span> <span class="c1"># Set random seed for reproducibility</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">seed</span><span class="p">(</span><span class="mi">42</span><span class="p">)</span> <span class="c1"># Generate random integer data in the range from -10 to 10 with a shape of 4x3</span> <span class="n">data</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">randint</span><span class="p">(</span><span class="o">-</span><span class="mi">10</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="n">size</span><span class="o">=</span><span class="p">(</span><span class="mi">4</span><span class="p">,</span> <span class="mi">3</span><span class="p">))</span> <span class="c1"># Create a pandas DataFrame using the generated random data, with column names 'A', 'B', and 'C'</span> <span class="n">df</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">DataFrame</span><span class="p">(</span><span class="n">data</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="p">[</span><span class="s1">'A'</span><span class="p">,</span> <span class="s1">'B'</span><span class="p">,</span> <span class="s1">'C'</span><span class="p">])</span> <span class="c1"># Print the DataFrame</span> <span class="nb">print</span><span class="p">(</span><span class="n">df</span><span class="p">)</span> </pre></div></td></tr></table></div> </body> </html> |
Troubleshooting(s)
Code Misalignment with Line Numbers in HTML
This section addresses a common issue encountered when integrating pre-formatted code snippets within HTML documents: line number misalignment.
Problem:
The initial rendering of the HTML file displays a misalignment between line numbers and the corresponding code content.
Cause:
This misalignment often occurs due to unintended indentation added during the code copying process. Code editors like Atom sometimes automatically indent pasted content, disrupting the original alignment within the HTML.
Solution:
To ensure proper alignment, verify that your code within the HTML document starts at the leftmost margin.
Additional Tips:
Utilize dedicated code highlighting tools or libraries for improved formatting and consistency.
Consider employing a plain text editor for copying code snippets to minimize unintended formatting changes.
References
Links | Site |
---|---|
Introduction and Quickstart | pygments.org |
Styles | pygments.org |
Styles doc | pygments.org |