Re: syntax highlighting

Just to clarify, the current problem is that the built-in highlighter does
not envision a keyword that has a hyphen in it.  Which makes sense in most
languages.... a hyphen is a subtraction symbol.  The highlighter considers
this punctuation.  I am pretty sure I can teach it that in CSS a hyphen is
part of the keyword regular expression.


On Thu, Mar 27, 2014 at 7:41 AM, Shane McCarron <shane@aptest.com> wrote:

> 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
>>
>
>