I’ve found that line numbering with word wrap could only be achieved in Pelican by a certain set of steps. I’ve listed the CSS and the Plugin I’ve used to get that to work.
Update: I’ve removed line numbers because it is selected along with the code if someone wants to copy. I’ll post here if I find a better solution.
Add the following lines in your theme.css:
/* For use with the code_line-number_word-wrap_switcher_jquery.js Pelican plugin */
code {overflow: auto;
/* This uses `white-space: pre-wrap` to get elements within <pre> tags to wrap.
Python, for code chunks within three backticks (```), doesn't wordwrap code lines by default,
because they're within <pre> tags, which don't wrap by default.
See https://github.com/github/markup/issues/168,
which is specifically about this parsing issue,
even though that link's discussion is talking about GitHub. */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
/* Following https://bililite.com/blog/2012/08/05/line-numbering-in-pre-elements/,
use CSS to add line numbers to all spans that have the class 'code-line' */
.highlight pre {
counter-reset: linecounter;
padding-left: 2em;
}.highlight pre span.code-line {
counter-increment: linecounter;
padding-left: 1em;
text-indent: -1em;
display: inline-block;
}.highlight pre span.code-line:before {
content: counter(linecounter);
padding-right: 1em;
display: inline-block;
color: grey;
text-align: right;
}
Then, we turn off the default linenums in codehilite. Also add the following pelican-plugin.
= ['fenced_code', 'codehilite(css_class=highlight, linenums=False)', ]
MD_EXTENSIONS
= ['better_codeblock_line_numbering'] PLUGINS
Reuse
Citation
BibTeX citation:
@online{krishnamurthy2015,
author = {Krishnamurthy, Dheepak},
title = {How to Add Line Numbers for Code Blocks in {Pelican}},
date = {2015-08-18},
url = {https://kdheepak.com/blog/how-to-add-line-numbers-for-code-blocks-in-pelican},
langid = {en}
}
For attribution, please cite this work as:
D.
Krishnamurthy, “How to add line numbers for code blocks in
Pelican,” Aug. 18, 2015. https://kdheepak.com/blog/how-to-add-line-numbers-for-code-blocks-in-pelican.