observablehq / feedback

Customer submitted bugs and feature requests
42 stars 3 forks source link

Markdown code styling #408

Open hellonearthis opened 2 years ago

hellonearthis commented 2 years ago

The markdown code style looks good in the editor but the look in the rendered markdown is lacking. image It would be great to have similar code styling.

It's a bit like this inline markdown code. walker.setCameraParam(cam.azimuth, cam.spin ? 1 : 0, cam.elevation, cam.roll);

vs what the editor presents the code view as.

walker.setCameraParam(cam.azimuth, cam.spin ? 1 : 0, cam.elevation, cam.roll);
mootari commented 2 years ago

Can you please also add the snippet as text?

hellonearthis commented 2 years ago

Updated message, is that what you meant @mootari

mootari commented 2 years ago

Observable's version of highlight.js was forked from version 9.15.6. This version's language parser for JavaScript offers only limited tokenization (see demo):

<code class="language-js hljs javascript">
walker.setCameraParam(cam.azimuth, cam.spin ? <span class="hljs-number">1</span> : <span class="hljs-number">0</span>, cam.elevation, cam.roll);
</code>

In order to match the degree of highlighting seen in either CodeMirror or Github's syntax highlighting, Observable would have to upgrade highlight.js. The most recent version 11.5.1 produces the following tokenization (see demo):

<code class="language-js hljs language-javascript">
walker.<span class="hljs-title function_">setCameraParam</span>(cam.<span class="hljs-property">azimuth</span>, cam.<span class="hljs-property">spin</span> ? <span class="hljs-number">1</span> : <span class="hljs-number">0</span>, cam.<span class="hljs-property">elevation</span>, cam.<span class="hljs-property">roll</span>);
</code>

Any upgrade would likely include breaking changes to the hljs API.