Add dark light for highlight

This commit is contained in:
Florian RICHER 2023-12-09 15:07:06 +01:00
parent cde7d8db7f
commit 8845db8993
7 changed files with 1709 additions and 15 deletions

View file

@ -10,28 +10,21 @@ use leptos_router::*;
pub fn App() -> impl IntoView {
provide_meta_context();
// https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/
view! {
<Stylesheet id="leptos" href="/pkg/portfolio.css"/>
<Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
<Link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark-dimmed.min.css"/>
<script src="/js/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
<Router>
<Routes>
<Route path="" view=pages::Home/>
<Route path="posts" view=pages::PostList/>
<Route path="posts/:slug" view=|| view! {
<script>
r#"
document.onreadystatechange = () => {
if (document.readyState === "complete") {
hljs.highlightAll();
mermaid.initialize();
mermaid.run({ querySelector: ".language-mermaid" });
}
};
"#
</script>
<Link media="(prefers-color-scheme: dark)" rel="stylesheet" href="/css/github-dark-dimmed.min.css"/>
<Link media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" rel="stylesheet" href="/css/github.min.css"/>
<script src="/js/highlight.min.js"></script>
<script src="/js/mermaid.min.js"></script>
<script src="/js/autoload.js"/>
<pages::PostElement/>
}/>
</Routes>