Syntax highlighting json content with Prism

This commit is contained in:
Hendrik Eeckhaut
2023-11-28 15:50:49 +01:00
parent b0ee395c48
commit 36626e480b
5 changed files with 26 additions and 1 deletions

View File

@@ -20,6 +20,7 @@ wasm-logger = "0.2.0"
web-time = "0.2"
spansy = { git = "https://github.com/sinui0/spansy", rev = "becb33d" }
tlsn-core = { git = "https://github.com/tlsnotary/tlsn", branch = "dev" }
wasm-bindgen = "0.2.89"
[patch.crates-io.ring]
git = "https://github.com/betrusted-io/ring-xous"

View File

@@ -8,6 +8,10 @@
<link data-trunk rel="rust" />
<link data-trunk rel="tailwind-css" href="./styles.css" />
<link data-trunk rel="icon" href="./tlsnotary.ico" />
<link data-trunk rel="css" href="prism/prism.css" />
<script data-trunk src="prism/prism.js" />
</head>
<body></body>

3
prism/prism.css Normal file
View File

@@ -0,0 +1,3 @@
/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism-okaidia&languages=json */
code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:0 0;}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}

4
prism/prism.js Normal file

File diff suppressed because one or more lines are too long

View File

@@ -2,6 +2,7 @@ use gloo::console::log;
use std::fmt;
use spansy::http::parse_response;
use wasm_bindgen::prelude::*;
use yew::prelude::*;
#[derive(Clone, PartialEq, Properties)]
@@ -54,6 +55,9 @@ fn get_content_type(bytes: &[u8]) -> (ContentType, String) {
#[function_component]
pub fn ContentIFrame(props: &Props) -> Html {
// JavaScript function to trigger Prism highlighting
use_effect(move || highlight_code());
match get_content_type(&props.bytes) {
(ContentType::Html, content_html) => html! {
<details class="p-4 w-5/6" open={true}>
@@ -67,10 +71,19 @@ pub fn ContentIFrame(props: &Props) -> Html {
<details class="p-4 w-5/6" open={true}>
<summary><b>{"Received JSON content:"}</b></summary>
<div class="bg-black text-white p-4 rounded-md overflow-x-auto">
<pre>{render_json(content_json)}</pre>
<pre>
<code class="lang-json">
{render_json(content_json)}
</code>
</pre>
</div>
</details>
},
_ => html! {},
}
}
#[wasm_bindgen(inline_js = "export function highlight_code() { Prism.highlightAll(); }")]
extern "C" {
fn highlight_code();
}