feat(gnoweb): prettify json code blocks in render (#2033)

<!-- please provide a detailed description of the changes made in this
pull request. -->
## Prettify JSON code blocks in gnoweb render

- add hljs json language support
- upgrade marked
- add marked-highlight to plug marked with hljs
- format json before highlighting
- fix horizontal overflow in code blocks

## Before
<img width="1511" alt="Screenshot 2024-05-03 at 19 42 59"
src="https://github.com/gnolang/gno/assets/7917064/9d226d33-8caf-4f23-86d1-59b3fbd84d7b">

## After
<img width="1512" alt="Screenshot 2024-05-03 at 19 41 21"
src="https://github.com/gnolang/gno/assets/7917064/535e5bad-f624-452c-83bd-9430db08392a">


<details><summary>Contributors' checklist...</summary>
- [ ] Added new tests, or not needed, or not feasible
- [ ] Provided an example (e.g. screenshot) to aid review or the PR is
self-explanatory
- [ ] Updated the official documentation or not needed
- [ ] No breaking changes were made, or a `BREAKING CHANGE: xxx` message
was included in the description
- [ ] Added references to related issues and PRs
- [ ] Provided any useful hints for running manual tests
- [ ] Added new benchmarks to [generated
graphs](https://gnoland.github.io/benchmarks), if any. More info
[here](https://github.com/gnolang/gno/blob/master/.benchmarks/README.md).
</details>

Signed-off-by: Norman Meier <[email protected]>

gno.land/pkg/gnoweb/static/css/app.css

@@ -283,6 +283,7 @@ label > img {
 
 code {
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 /*** COMPOSITION ***/
 .container {

gno.land/pkg/gnoweb/static/js/highlight.min.js

@@ -313,4 +313,10 @@ className:"number",variants:[{begin:e.C_NUMBER_RE+"[i]",relevance:1
 },e.C_NUMBER_MODE]},{begin:/:=/},{className:"function",beginKeywords:"func",
 end:"\\s*(\\{|$)",excludeEnd:!0,contains:[e.TITLE_MODE,{className:"params",
 begin:/\(/,end:/\)/,endsParent:!0,keywords:n,illegal:/["']/}]}]}}})()
-;hljs.registerLanguage("go",e)})();
+;hljs.registerLanguage("go",e)})();/*! `json` grammar compiled for Highlight.js 11.5.1 */
+(()=>{var e=(()=>{"use strict";return e=>({name:"JSON",contains:[{
+className:"attr",begin:/"(\\.|[^\\"\r\n])*"(?=\s*:)/,relevance:1.01},{
+match:/[{}[\],:]/,className:"punctuation",relevance:0},e.QUOTE_STRING_MODE,{
+beginKeywords:"true false null"
+},e.C_NUMBER_MODE,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE],illegal:"\\S"})
+})();hljs.registerLanguage("json",e)})();

gno.land/pkg/gnoweb/static/js/renderer.js

@@ -8,10 +8,26 @@ function renderUsernames(raw) {
 }
 
 function parseContent(source) {
-  marked.setOptions({ gfm: true });
+  const { markedHighlight } = globalThis.markedHighlight;
+  const { Marked } = globalThis.marked;
+  const markedInstance = new Marked(
+    markedHighlight({
+      langPrefix: 'language-',
+      highlight(code, lang, info) {
+        if (lang === "json") {
+          try {
+            code = JSON.stringify(JSON.parse(code), null, 2);
+          } catch {}
+        }
+        const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+        return hljs.highlight(code, { language }).value;
+      }
+    })
+  );
+  markedInstance.setOptions({ gfm: true });
   const doc = new DOMParser().parseFromString(source, "text/html");
   const contents = doc.documentElement.textContent;
-  return marked.parse(contents);
+  return markedInstance.parse(contents);
 }
 
 /*

gno.land/pkg/gnoweb/views/funcs.html

@@ -130,6 +130,7 @@
 {{- end -}}
 
 {{- define "js" -}}
+<script type="text/javascript" src="/static/js/highlight.min.js"></script>
 <script type="text/javascript" src="/static/js/marked.min.js"></script>
 <script type="text/javascript" src="/static/js/umbrella.min.js"></script>
 <script type="text/javascript" src="/static/js/purify.min.js"></script>