mirror of
https://github.com/tlsnotary/proof_viz.git
synced 2026-01-08 03:53:51 -05:00
Syntax highlighting json content with Prism
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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
3
prism/prism.css
Normal 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
4
prism/prism.js
Normal file
File diff suppressed because one or more lines are too long
@@ -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();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user