{"id":2562,"date":"2012-08-05T23:09:52","date_gmt":"2012-08-06T05:09:52","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=2562"},"modified":"2013-12-09T10:50:08","modified_gmt":"2013-12-09T16:50:08","slug":"line-numbering-plugin-for-prism","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2012\/08\/05\/line-numbering-plugin-for-prism\/","title":{"rendered":"Line Numbering Plugin for <code>Prism<\/code>"},"content":{"rendered":"<strong>Updated 2013-12-09 to use much simpler code<\/strong>\r\n<p>One thing that is nice about <a href=\"http:\/\/prismjs.com\">Prism<\/a> is that it provides hooks to extend the syntax highlighting, so it is straightforward to create a plugin that adds features like <a href=\"\/blog\/2012\/08\/05\/line-numbering-in-pre-elements\/\" title=\"Line Numbering in <pre> Elements\">my line numbering<\/a>, so I can do things like:<\/p>\r\n<pre><code class=\"language-html demo\">&lt;pre&gt;&lt;code class=\"language-javascript\" data-linenumber=4&gt;\r\nfunction foo(arg){\r\n  console.log('You said: '+arg);\r\n}&lt;\/code&gt;&lt;\/pre&gt;<\/code><\/pre>\r\n<p><a href=\"\/blog\/wp-content\/plugins\/syntaxhighlightchooser\/prism\/prism.linenumber.js\">Download the code<\/a>.<\/p>\r\n<p><a href=\"\/blog\/wp-content\/plugins\/syntaxhighlightchooser\/prism\/prism-dw.css\">Download the CSS<\/a> (the linenumbering parts are at the bottom).<\/p>\r\n<p><a href=\"\/blog\/blogfiles\/prism\/prism.linenumber.html\">See an example<\/a> (working together with the <a href=\"http:\/\/prismjs.com\/plugins\/line-highlight\/\">line highlighting plugin<\/a>)(note that Chrome requires an explicit <code class=\"language-css\">line-height<\/code> on the <code class=\"language-html\">&lt;pre&gt;<\/code> to work).\r\n<!--more-->\r\n<p>You use the plugin simply by including the script after loading Prism, then adding the <code class=\"language-html\">data-linenumber<\/code> attribute to the <code class=\"language-html\">code<\/code> element, as in <code class=\"language-html\">&lt;code class=\"language-javascript\" data-linenumber&gt;&lt;code&gt;<\/code>. The default first line is <code>0<\/code> (we're computer scientists after all!). Change it by assigning a value to the <code class=\"language-html\">data-linenumber<\/code> attribute, as in <code class=\"language-html\">&lt;code class=\"language-javascript\" data-linenumber=4&gt;&lt;code&gt;<\/code>.<\/p>\r\n<p>As I discussed before, the <code class=\"language-html\">code<\/code> element must have a style of <code class=\"language-css\">counter-reset: something<\/code> and each line is wrapped in a <code class=\"language-html\">&lt;span class=\"line\"&gt;<\/code> element, and those must have a style of <code class=\"language-css\">counter-increment: something<\/code>. Then the <code class=\"language-css\">span.line:before<\/code> selector needs a style of <code class=\"language-css\">content: counter(something)<\/code>.<\/p>\r\n<p>Hope this helps someone!<\/p>.","protected":false},"excerpt":{"rendered":"Updated 2013-12-09 to use much simpler code One thing that is nice about Prism is that it provides hooks to extend the syntax highlighting, so it is straightforward to create a plugin that adds features like my line numbering, so I can do things like: &lt;pre&gt;&lt;code class=\"language-javascript\" data-linenumber=4&gt; function foo(arg){ console.log('You said: '+arg); }&lt;\/code&gt;&lt;\/pre&gt; Download [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2562"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=2562"}],"version-history":[{"count":14,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2562\/revisions"}],"predecessor-version":[{"id":3032,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2562\/revisions\/3032"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=2562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=2562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=2562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}