When I run rst2html.py against my ReStructured Text source, with its code-block directive, it adds all the spans and classes to the bits of code in the HTML, but the CSS to actually colorize those spans is absent. Is it possible to get RST to add a CSS link or embed the CSS in the HTML file?
Even though “World!” should be on a new line, the syntax highlighted section displays it on the same line. The update function needs to be edited. Instead of using innerText, we can use innerHTML, replacing the open bracket character ( <) with < and replace the ampersand character ( &) with & to stop HTML escapes from being evaluated.
Now it’s editable and highlighted! Now, when the textarea is edited — as in, a pressed key on the keyboard comes back up — the syntax-highlighted code changes. There are a few bugs we’ll get to, but I want to focus first on making it look like you are directly editing the syntax-highlighted element, rather than a separate textarea.
It would even work with a syntax highlighter you create yourself, if you want it to. I hope this becomes useful, and can be used in many places, whether it’s a WYSIWYG editor for a CMS, or even a forms where the ability to enter source code is a requirement like a front-end job application or perhaps a quiz.
The CSS Modules method, again, has some great use cases. For applications looking to take advantage of scoped styles while maintaining the performance benefits of a static, but compiled stylesheet, then CSS Modules may be the right fit for you!
As of Docutils 0.9 you could use the code
directive. From the example on this page:
.. code:: python
def my_function():
"just a test"
print 8/2
Alternatively, you can use Pygments for syntax highlighting. See Using Pygments in ReST documents and this SO answer.
Finally, you could also use the code in this or this blogpost.
Update As discussed in the comments, to get the style file used by Pygments use the command
pygmentize -S default -f html -a .highlight > style.css
which will generate the Pygments CSS style file style.css
.
In docutils 0.9 and 0.10 it doesn't mattter whether you use code, code-block or sourcecode. All directives are considered code role.
This command will generate css that can embedded into html by rst2html.py.
pygmentize -S default -f html -a .code > syntax.css
This command will generate the html:
rst2html.py --stylesheet=syntax.css in.txt > out.html
By default, rst2html.py
outputs spans with class names like comment
, number
, integer
, and operator
. If you have a docutils.conf
either in the same directory as the source, or /etc
, or in ~/.docutils
with
[parsers]
[restructuredtext parser]
syntax_highlight=short
... then the class names will be c
, m
, mi
, and o
which matches syntax.css
generated by pygmentize
.
See syntax-highlight in docutils documentation
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With