Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Line Numbers: Improved documentation #2456

Merged
merged 1 commit into from Jul 22, 2020
Merged

Line Numbers: Improved documentation #2456

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 19 additions & 1 deletion plugins/line-numbers/index.html
View file
Open in desktop
Expand Up @@ -22,7 +22,25 @@
<h1>How to use</h1>

<p>Obviously, this is supposed to work only for code blocks (<code>&lt;pre>&lt;code></code>) and not for inline code.</p>
<p>Add the <code>line-numbers</code> class to your desired <code>&lt;pre></code> or any of its ancestors, and the line-numbers plugin will take care of the rest. To give all code blocks line numbers, add the <code>line-numbers</code> class to the <code>&lt;body></code> of the page.</p>
<p>Add the <code>line-numbers</code> class to your desired <code>&lt;pre></code> or any of its ancestors, and the Line Numbers plugin will take care of the rest. To give all code blocks line numbers, add the <code>line-numbers</code> class to the <code>&lt;body></code> of the page. This is part of a general activation mechanism where adding the <code>line-numbers</code> (or <code>no-line-numbers</code>) class to any element will enable (or disable) the Line Numbers plugin for all code blocks in that element. <br> Example:</p>

<pre><code>&lt;body class="line-number"> &lt;!-- enabled for the whole page -->

&lt;!-- with line numbers -->
&lt;pre>&lt;code>...&lt;/code>&lt;/pre>
&lt;!-- disabled for a specific element - without line numbers -->
&lt;pre class="no-line-numbers">&lt;code>...&lt;/code>&lt;/pre>

&lt;div class="no-line-numbers"> &lt;!-- disabled for this subtree -->

&lt;!-- without line numbers -->
&lt;pre>&lt;code>...&lt;/code>&lt;/pre>
&lt;!-- enabled for a specific element - with line numbers -->
&lt;pre class="line-number">&lt;code>...&lt;/code>&lt;/pre>

&lt;/div>
&lt;/body></code></pre>

<p>Optional: You can specify the <code>data-start</code> (Number) attribute on the <code>&lt;pre></code> element. It will shift the line counter.</p>
<p>Optional: To support multiline line numbers using soft wrap, apply the CSS <code>white-space: pre-line;</code> or <code>white-space: pre-wrap;</code> to your desired <code>&lt;pre></code>.</p>
</section>
Expand Down