kmx.io/prism.js/plugins/line-highlight/index.html
Branch
-
Show log
Commit
-
Hash : de79636a
Author :
Date : 2021-05-01T14:57:39
Website: Moved remaining vendor files into `vendor` folder (#2829)
-
plugins/line-highlight/index.html
-
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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="assets/favicon.png" /> <title>Line highlight ▲ Prism plugins</title> <base href="../.." /> <link rel="stylesheet" href="assets/style.css" /> <link rel="stylesheet" href="themes/prism.css" data-noprefix /> <link rel="stylesheet" href="plugins/line-highlight/prism-line-highlight.css" data-noprefix /> <link rel="stylesheet" href="plugins/line-numbers/prism-line-numbers.css" data-noprefix /> <script src="assets/vendor/prefixfree.min.js"></script> <script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script> <script src="https://www.google-analytics.com/ga.js" async></script> </head> <body> <header data-plugin-header="line-highlight"></header> <section class="language-markup"> <h1>How to use</h1> <p>Obviously, this only works on code blocks (<code><pre><code></code>) and not for inline code. <p>You specify the lines to be highlighted through the <code>data-line</code> attribute on the <code><pre></code> element, in the following simple format:</p> <ul> <li>A single number refers to the line with that number</li> <li>Ranges are denoted by two numbers, separated with a hyphen (-)</li> <li>Multiple line numbers or ranges are separated by commas.</li> <li>Whitespace is allowed anywhere and will be stripped off.</li> </ul> <p>Examples:</p> <dl> <dt>5</dt> <dd>The 5th line</dd> <dt>1-5</dt> <dd>Lines 1 through 5</dd> <dt>1,4</dt> <dd>Line 1 and line 4</dd> <dt>1-2, 5, 9-20</dt> <dd>Lines 1 through 2, line 5, lines 9 through 20</dd> </dl> <p>In case you want the line numbering to be offset by a certain number (for example, you want the 1st line to be number 41 instead of 1, which is an offset of 40), you can additionally use the <code>data-line-offset</code> attribute. <p>You can also link to specific lines on any code snippet, by using the following as a url hash: <code>#{element-id}.{lines}</code> where <code>{element-id}</code> is the id of the <code><pre></code> element and <code>{lines}</code> is one or more lines or line ranges that follow the format outlined above. For example, if there is an element with <code>id="play"</code> on the page, you can link to lines 5-6 by linking to <a href="plugins/line-highlight/#play.5-6">#play.5-6</a></p> <p>If line numbers are also enabled for a code block and the <code><pre></code> element has an id, you can add the <code>linkable-line-numbers</code> class to the <code><pre></code> element. This will make all line numbers clickable and when clicking any line number, it will change the hash of the current page to link to that specific line.</p> </section> <section> <h1>Examples</h1> <h2>Line 2</h2> <pre data-line="2" data-src="plugins/line-highlight/prism-line-highlight.js" id="play"></pre> <h2>Lines 15-25</h2> <pre data-line="15-25" data-src="plugins/line-highlight/prism-line-highlight.js"></pre> <h2>Line 1 and lines 3-4 and line 42</h2> <pre data-line="1,3-4,42" data-src="plugins/line-highlight/prism-line-highlight.js"></pre> <h2>Line 43, starting from line 41</h2> <pre data-line="43" data-line-offset="40" data-src="plugins/line-highlight/prism-line-highlight.js"></pre> <p><a href="plugins/line-highlight/#play.50-55,60">Linking example</a></p> <h2>Compatible with <a href="plugins/line-numbers">Line numbers</a></h2> <pre class="line-numbers" data-src="plugins/line-numbers/index.html" data-line="1" data-start="-5" style="white-space:pre-wrap;"></pre> <p>Even with some extra content before the <code>code</code> element.</p> <pre class="line-numbers" data-line="7"><div style="padding: .25em">Some content</div><hr/><code class="language-markup" id="foo"></code></pre> <script>document.querySelector('#foo').textContent = document.documentElement.innerHTML;</script> <h2>With linkable line numbers</h2> <pre id="linkable" class="line-numbers linkable-line-numbers" data-start="20" data-src="plugins/line-highlight/prism-line-highlight.js"></pre> </section> <footer data-src="assets/templates/footer.html" data-type="text/html"></footer> <script src="prism.js"></script> <script src="plugins/line-highlight/prism-line-highlight.js"></script> <script src="plugins/line-numbers/prism-line-numbers.js"></script> <script src="assets/vendor/utopia.js"></script> <script src="components.js"></script> <script src="assets/code.js"></script> </body> </html>