3 ms·
I could not see any cell because I have JS disabled by default. blog-cells's readme addresses this: > Using pre tags instead of script tags > Script tags are
by jraph 3y ago
I could not see any cell because I have JS disabled by default. blog-cells's readme addresses this:
> Using pre tags instead of script tags
> Script tags are great for defining notebook cells since they can hold pretty much any code without escaping. However, they are invisible by default, meaning that readers won't see anything until blog-cells loads. You can get around this by using <pre class="notebook-cell"> tags instead, however reserved HTML characters should be escaped using HTML entities.
<pre class="notebook-cell">
console.log("<b>HELLO</b>");
</pre>
I was pleasantly surprised to see this. I know it's a bit less convenient to type because of the entities, but I believe this is the way to go and this should be the main, advertised, method. Progressive enhancement. Keep your content as accessible as possible :-)
Now, I do think the result blocks would be better statically rendered if it's going to yield the same result each time they are run. The code runs once, at generation time, and the page is totally readable without JS. It indeed requires a generation step, but I think it's worth it, and blogs usually already have one.
I think Emacs has something like this with Org mode.
- scepheo 3y agoThe no-JS problem could also be solved by some CSS instead: script[type="text/notebook-cell"] { display: block; } Which stops you from having to type out all those entities. Once fully supported, you could even put this behind a media query (`@media (scripting: none)`) so you don't have to change the display with JavaScript after load.
- deleted 3y ago[deleted]
- swiftcoder 3y agoIn the context of a static site generator, you'd usually render all those entities with a markdown processor + syntax highlighter anyway.