feedback icon indicating copy to clipboard operation
feedback copied to clipboard

Markdown code styling

Open hellonearthis opened this issue 3 years ago • 3 comments

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

hellonearthis avatar Apr 27 '22 20:04 hellonearthis

Can you please also add the snippet as text?

mootari avatar Apr 27 '22 20:04 mootari

Updated message, is that what you meant @mootari

hellonearthis avatar Apr 27 '22 20:04 hellonearthis

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.

mootari avatar Apr 27 '22 21:04 mootari