Syntax highlighting for code blocks

[almereyda]

As a user of Schemio, I would like to present code blocks with syntax highlighting, in order to make understanding of the visual examples easier.

This could be implemented through hooking in Highlight.js

• https://highlightjs.org/

and have it optionally available through the Item's configuration tab through the right. A dropdown for choice of language can be helpful in determining the correct colouring scheme.

[ishubin]

Hi @almereyda, Thanks for posting it!

I did try syntax highlighting in Schemio using highlightjs but I decided to remove it. Here is the old commit https://github.com/ishubin/schemio/commit/6c3029974021b295d5c6065d2662cb642e8c70cf. I removed it because the resulting bundle was too large and the highlightjs was the top contributor to its size. I didn't want Schemio to become bloated (its js bundle is already 1.6 MB) and I thought that I could sacrifice syntax highlighting, since it wasn't considered the top feature anyway, yet was the heaviest part of Schemio.

I do want to bring syntax highlighting back to Schemio but I would rather do it dynamically and not be a part of js bundle. Lets keep this issue, but I want to make sure we try to implement it using a dynamic js loader (not sure how to achieve this yet, needs investigation)

[almereyda]

I like the idea of not adding much more third parties to the bundle.

Maybe this can be optional, and the dependency would only be loaded via CDN at runtime, if a user chooses to do so?

[ishubin]

I am thinking of adding something like a lazy JS loader. I could try to package highlightjs in the assets folder and then dynamically load the library as soon as code block is rendered in the document.

[ishubin]

@almereyda I have implemented syntax highlighting using a javascript worker for background processing and dynamic loading of highlightjs lib. There is only one problem: due to the way text slots are handled in items, it will not work correctly on your old documents. You would have to clean up <p> tags as that is what the in-place text editor from tiptap is adding for line breaks. I only added two themes for now: dark and light.

Could you please check it and let me know if something is not right? It's already released, here is an example: https://schemio.app/#/offline-editor/?doc=UEsDBAoAAAAIAC5hDVXSQvCz7QIAAAoHAAAIAAAAZG9jLmpzb27NVGtv0zAU_SuWP0CHQptnXyuT1gEd08SATpo2Ok1O6iRmmW0cJ21V5b9znb62SsDgA6KqEt_r.zj35NhLzKa4j527VOdDfT52yvDtlX1ZXJZX37.dvru5PimHQfeuhy3MyQOFUE0fJFiaJDnuf721MAOPWS5ha67HmdBggcF0RusFeCFvII8GuVaCJ0dnpCTjSDGpB621a9CSR1A1EplQEKySkDRcP7DQ7uE07QMIkWQ6ZTy5FBL3_a15TmNo4thbxxeWpE89Q6G1eICkysKhmC4Mtlhwg.1EFIpRhT7SmRltBTgSPNfITI3eoAk.EylfTPDhhK82SGL8HtgTDg0aJtAy3oPD5w2SkowlHGIyg93C5cbWwhA8S4HYsSSRIV0q.nqmiNyb_9F0f0CAY1dAQZ4SSesxp_QuzER0D8WJosTwMsf9oNl2g3bbC_xO1.l13K6FF8br2Z2ub_td1_V7sAdAcd9z_KbX8T2v7Qeu07U9mA76BH6z3XOdoBc4nU5g.4b5tYpOoCsarrtmjN.vxRTSlJTMULfEtKRc1_4N3E9KyFpcGeEJVNkJCVePJUnjmEZ6o08jcD23nVH7w42EwOXKdXx6fD100.nn9Sd_jnJHF79UrG2h1f9faxVkcm8EGRfcpBtN6oWk6D3YCAAXkUbLCUfwa7VQSIC_iCKWo4LTuRRK0ylqSMVKoumBhUIakSKHAP0yR5mYURWRnK7yt8lcT3hlOkHFY6RoUmREGQSRZoKDQxeKAxhEkBQQDZi1AMNgnHATZ2YwCBuMM81INtyVPkCvauw70FcURWRTdr8mp7PNmDOmU1HAWyi1qNuHYG7LzFKqU0irRwOYYEAm0IeEQiklso9GAsUsKRTNYZdoZKrFsFvkzVWZNYYXBuEa4CNm.ujpONYqAqiqfqeX__lKAA063b3j365Pf8e26_PuPeu8I_evTjx8p7pQVs9gbW6A0QWsY5ZlJmbv0rXNfbt51AxXP7slqtvqB1BLAQIUAAoAAAAIAC5hDVXSQvCz7QIAAAoHAAAIAAAAAAAAAAAAAAAAAAAAAABkb2MuanNvblBLBQYAAAAAAQABADYAAAATAwAAAAA-

[almereyda]

This is so cool. It was easy to find the settings, and to set another language, if desired. Much wow, many thanks.