On Fri, Apr 18, 2014 at 6:37 AM, Edward K. Ream <[email protected]> wrote:
> On Wed, Apr 16, 2014 at 9:14 PM, T P <[email protected]> wrote: > > I've only been using Leo for a few days, and spent most of today figuring > > out how to get the new Viewrendered2 plugin to use stylesheets while > > displaying reStructuredText (and Markdown) nodes. So here's a brief > summary > > to make this easier for others. > > Thanks for this summary. > > I have been able to get vr2 working on math examples, such as: > > @language rest > > .. math:: > > α_t(i) = P(O_1, O_2, … O_t, q_t = S_i λ > > This renders beautifully when exported. > > But I have not been able to get syntax coloring working. Given:: > > @language python > > g.cls() > import sys > > The generated rst is:: > > render_helper <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 > Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra > nsitional.dtd"> > <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> > <head> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > <meta name="generator" content="Docutils 0.10: > http://docutils.sourceforge.net/"; /> > <title>Sherlock test</title> > <style type="text/css"> > > /* > :Author: Edward K. Ream > :Contact: [email protected] > > Personal stylesheet for use with viewrendered2.py plugin for Leo. > */ > @import url(vr2_style.css); /*copy of skeeterstyle.py */ > @import url(pygments_default.css); > > </style> > </head> > <body> > <div class="document" id="sherlock-test"> > <h1 class="title">Sherlock test</h1> > > <pre class="code python literal-block"> > <span class="name">g</span><span class="operator">.</span><span > class="name">cls</span><span class="punctuation">()</spa > n> > <span class="keyword namespace">import</span> <span class="name > namespace">sys</span> > </pre> > </div> > </body> > </html> > > But the class names in the <span> elements do not match the class > names in pygments_default.css so no coloring happens. > > BTW, roughly the same output is produced if I used the docutils .. > code::python directive. > > I don't recall ever getting syntax coloring to work properly, either > with vr or vr2. > > Can anyone suggest what I should be doing? > > Without the patch I mentioned in my initial post wherein I changed my local copy of leo.plugins.viewrendered2.WebViewPlus#init_config() to add some additional docutils options:: getConfig(gc.getString, 'syntax_highlight', 'long') getConfig(gc.getBool, 'no_compact_lists', False) getConfig(gc.getBool, 'no_compact_field_lists', False) and also specifying in your @settings at least: @string vr-syntax-highlight = short by default, docutils is going to generate "long" class names which are *not*compatible with what pygmentize generates. Note that the documentation for "syntax-highlight" [1] says: long Use hierarchy of long token type names. short Use short token type names. ( *For use with Pygments-generated stylesheets) *So by design, docutils can only use stylesheets generated by pygmentize when you set its syntax-highlight option to "short". I thought that skeeterstyle.css had both "long" and "short" styles defined but I just took a look a closer look. It has: pre.code .ln { color: grey; } /* line numbers */ pre.code, code { background-color: #eeeeee } pre.code .comment, code .comment { color: #5C6576 } pre.code .keyword, code .keyword { color: #3B0D06; font-weight: bold } pre.code .literal.string, code .literal.string { color: #0C5404 } pre.code .name.builtin, code .name.builtin { color: #352B84 } pre.code .deleted, code .deleted { background-color: #DEB0A1} pre.code .inserted, code .inserted { background-color: #A3D289} which is close but not complete or exactly correct. There really should be periods before the code's that don't have them (to indicate that .code is a css class). But even changing these lines to: pre.code .ln, .code .ln { color: grey; } /* line numbers */ pre.code, .code { background-color: #eeeeee } pre.code .comment, .code .comment { color: #5C6576 } pre.code .keyword, .code .keyword { color: #3B0D06; font-weight: bold } pre.code .literal.string, .code .literal.string { color: #0C5404 } pre.code .name.builtin, .code .name.builtin { color: #352B84 } pre.code .deleted, .code .deleted { background-color: #DEB0A1} pre.code .inserted, .code .inserted { background-color: #A3D289} won't really help because skeeterstyle.css doesn't contain very many styles. I would have thought that the background color and "import" would have been correctly colored in your case though? (For these kinds of CSS problems I use Firefox and highlight the particular text I'm interested in, right-click it, and choose "Inspect Element" from the context menu. The Rules tab of the Inspector shows me what current style is active for that element and which stylesheet it is defined in. I imagine other browsers have similar capabilities but I'm used to Firefox and Firebug if things really get confusing.) I really recommend that you incorporate my tiny patch, and then use the "short" docutils syntax-highlight option. The generated HTML will then look more like this: <pre class="code python literal-block"> <span class="k">def</span> <span class="nf">myFunction</span><span class="p">():</span> <span class="sd">"""Do something as docstring"""</span> <span class="n">s</span> <span class="o">=</span> <span class="s">"just a test"</span> <span class="k">print</span> <span class="mi">8</span><span class="o">/</span><span class="mi">2</span> </pre> And *will* be compatible with what pygmentize generates. For example, the relevant lines from my pygment_default.css look like this: .code { background: #f8f8f8; } .code .k { color: #008000; font-weight: bold } /* Keyword */ .code .nf { color: #0000FF } /* Name.Function */ .code .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */ .code .o { color: #666666 } /* Operator */ .code .s { color: #BA2121 } /* Literal.String */ .code .mi { color: #666666 } /* Literal.Number.Integer */ and the correct colors show up. But yes, there are a few steps you need to get right for this to happen. AFAIK, there is no utility that will automatically convert pygmentize generated stylesheets to the "long" form css that docutils requires by default? If you squint at the site-packages/Pygments-1.6-py2.7.egg/pygments/lexers/agile.py#tokens mapping, you can sorta see where the "long token types" come from. [1] http://docutils.sourceforge.net/docs/user/config.html#syntax-highlight -- You received this message because you are subscribed to the Google Groups "leo-editor" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/leo-editor. For more options, visit https://groups.google.com/d/optout.
