Re: syntax highlighting

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

Received on Thursday, 27 March 2014 08:50:58 UTC