Improved examples

[gkellogg]

Makes most of the changes called for in #26.

Tabbed UI could use some styling assistance.

There remain some examples which didn't make sense to use the tabular format, and in some cases, examples are interrelated (as before), but include attributes to allow them to be checked against each other.

Examples do not include graphical images representing the equivalent graphs. These would add even more of a burden, and each would require it's own separate accessibility explanation, so doesn't seem worth it. That said, we may want to include more graphics on a case-by-case basis.

Visually, the document is somewhat shorter, but the HTML source is inflated quite a bit. I'm not in favor of splitting the document into multiple parts, regardless.

[azaroth42]

Does the Preview / Diff happen automagically somehow? Should I wait for it to appear?

[gkellogg]

It’s supposed to happen automatically, and may still. You can always see it with rawgit.

[gkellogg]

We may want to consider styling for print, which could expand all parts of the examples, and add some sub-example headers.

[iherman]

I am not sure why the preview does not work. In any case

https://rawgit.com/w3c/json-ld-syntax/improved-examples/index.html

is the right rawgit reference

[iherman]

I like it a lot!

I wonder whether there is a way to force a colored syntax output for the expanded form and for Turtle. While this may be available in JSON I however doubt that there is a syntax coloring tool for Turtle, though...

[gkellogg]

S when we add comments or emphasis, we need to turn off the syntax highlighting.

[BigBlueHat]

@gkellogg this looks great, thank you!

@iherman I filed an issue for supporting Turtle highlighting back in 2017. It seems Respec uses highlight.js which (still) lacks a Turtle highlighter. If we make one for highlight.js, then Respec can integrate that.

[BigBlueHat]

Love it!

[cygri]

Regarding syntax highlighting for Turtle, there is a PR for highlight.js that adds Turtle and SPARQL support, but has been sitting in limbo for quite some time:
https://github.com/highlightjs/highlight.js/pull/1553/commits

[gkellogg]

Part of the problem for us using syntax highlighting is that we markup our examples with **** and #### which is used in a data-transform to add HTML elements with CSS highlighting. This means that by the time a syntax highlighter looks at it, either it includes the **** or the HTML bits, so it won't be grammatically correct.