Support for syntax highlighted code blocks

[goblinfactory]

please provide native support for embedding code examples - ie. make nuejs a first class blogging platform for coders

I'd like to be able to support embedding code examples in markdown similar to how we do it in github.

For example, current nuejs has a bug, where collections are not sorted by date, so I tried to write an experimental blog post, using nuejs describing how I hacked the sorting as follows (surrounding the code block with triple ticks)

<article @name=blog-posts>
  <script>
    constructor({ posts }) {
      this.items = posts.sort((a, b) => {
        const dateA = new Date(a.date.replace(/\./g, '/'));
        const dateB = new Date(b.date.replace(/\./g, '/'));
        return dateB.getTime() - dateA.getTime();
      });
    }
  </script>

<a :for="post,i in items" href={base}{post.url} class="flex post">

I can't even do it using <pre> or <code> , that can't work!

This currently renders as nothing [blank] in current version of nue. I think it ignores the triple tick and tries to compile it? Not sure. Either way, my Expectation; is for it to be rendered (htmlEncode'd) plus some default out of the box syntax colourising and formatting and developer appopriate out of the box styling, that is not affected by any other css site wide settings.

Just my 2 cents. Currently I'm having to use screenshots to capture some thoughts and feedback on nuejs. Finding it difficult to actually blog about nuejs. So this might help make nuejs easier to write about.

[nobkd]

There is a possibility to highlight code with a function: https://nuejs.org/docs/reference/nuemark-api.html#highlighter
But I think it's not really accessible from Nuekit currently...

This info box states: https://nuejs.org/docs/concepts/nuemark.html#fenced-code-blocks

A Nue-optimized syntax highlighter will be released on the next version of Nuemark.

[tipiirai]

Nue uses pubDate as the sort column, to be aligned with Jekyll naming pattern. Here's the related code. Also added the missing documentation.

Syntax highlight is a very important feature that deserves a separate project—going to release that in February.

[tipiirai]

@goblinfactory #176 (nested tabs) now work, [table] tag won't break with a comma character, and GA and other client scripts can now be configured. Working on this issue (custom syntax highlighter) next. Likely takes 1-2 weeks, since it's a relatively cool thing.

[goblinfactory]

I've added [fixed in] links in the review blogpost to the commits of where the fixed/updates you mention above have been made so that anyone reading my blog post can see it was fixed very quickly. Superb! Thank you for the rapid fixes.

[tipiirai]

This is now done. Please check: https://nuejs.org/blog/introducing-glow/

[goblinfactory]

@tipiirai fantastic! looking at it now.
one teeensy tiny piece of CLS / layout shift that I know is very important given your desire to be pixel perfect.
The third "web component"

tab at the bottom of the announcement page changes the height, is shorter) causing some CLS.
this one
other than that it's looking absolutely sublime! (hehehe! excuse the pun.) superb ...(bows!)

[nobkd]

on

<li role="tabpanel">...</li>

this rule

/* https://nuejs.org/global/css1/typo.css */
:last-child {
  margin-bottom: 0px;
}

interferes with

/* https://nuejs.org/global/css2/special-typo.css */
li {
  margin-bottom: 0.8em;
 /*...*/
}

which results in a layout shift for the last element of the panels in the group