Re: syntax highlighting

I also like highlight.js.  But it should be simple enough to just fix the
one that we are using now.  I am looking at the code.

Note that you can put an additional class like "lang-css" on the block to
tell the prettyprinter what language you are using.  At least according to
the code.  I have not yet attempted it.


On Thu, Mar 27, 2014 at 3:50 AM, Robin Berjon <robin@w3.org> wrote:

> On 27/03/2014 09:34 , James Craig wrote:
>
>> I just tried this out and it looks great for markup and JavaScript
>> examples, but leaves something to be desired for CSS.
>>
>
> Yes, the highlighter is automatic. There are language-specific
> alternatives but they tend to be a fair bit heavier. This all happened
> before Lea's Prism though (http://prismjs.com/) so maybe we could use
> that. The problem is that all the documents that now don't declare a
> language would stop working.
>
> Maybe it's light enough to be added alongside?
>
>
>  For example, The "checked" substring of the [aria-checked] attribute
>> selector gets flagged as a keyword. Likewise for the filename substring.
>>
>> [aria-checked="true"]::before{  background-image:  url(checked.gif);  }
>>
>
> That's annoying.
>
>
>  Quoting from http://www.w3.org/respec/ref.html#highlight
>> "The syntax highlighter will do its best to guess how to perform
>> highlighting without knowing the language. If needed you can tweak the
>> syntax highlighting styles in order to obtain better results."
>>
>> Is this suggesting color tweaking or something more substantive.
>>
>
> That part of the docs is just saying that if you want to change the
> colours you can. Nothing more.
>
>
>  If I
>> add a data-transform attr to a node like <pre class="example
>> highlight">, does that transformation happen before or after the
>> highlighting step?
>>
>
> The answer to that is in:
>
>     https://github.com/darobin/respec/blob/develop/js/
> profile-w3c-common.js
>
> And it's that transformations happen before highlighting.
>
>
>  I'm wondering if I should special-case the CSS
>> examples and retransform them after the highlight, or remove the
>> highlight class on these.
>>
>
> There's a third way: trying with Prism instead. I'm not yet sure if it's
> the right pick for the whole system, but it can certainly be added in a
> given draft to experiment with.
>
> I've asked Lea what she thinks.
>
>
> --
> Robin Berjon - http://berjon.com/ - @robinberjon
>