Compare commits

...

4 commits

4 changed files with 71 additions and 15 deletions

View file

@ -9,7 +9,8 @@ katex: true
draft: false
---
This article contians some test for latex support. Currently the lib used for rendering LaTeX is [\\(\KaTeX\\)](https://katex.org/)
This article contians some test for latex support.
Currently the lib used for rendering LaTeX is [\\(\KaTeX\\)](https://katex.org/)
<!--more-->
@ -20,7 +21,8 @@ $$
## The code which render the above
```
This article contians some test for latex support. Currently the lib used for rendering LaTeX is [\\(\KaTeX\\)](https://katex.org/)
This article contians some test for latex support.
Currently the lib used for rendering LaTeX is [\\(\KaTeX\\)](https://katex.org/)
$$
\pi=\int_{-\infty}^\infty\frac{dx}{1+x^2}

View file

@ -51,7 +51,7 @@
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="{{ "lib/katex/contrib/auto-render.min.js" | relURL }}"
onload="renderMathInElement(document.body);"></script>
onload="renderMathInElement(document.querySelector('body .single .content'));"></script>
{{ end }}
{{ with and .Site.Params.remark42 .Params.show_comments }}
@ -76,4 +76,5 @@
<link rel="stylesheet" href="{{ "lib/icofont/icofont.min.css" | relURL }}" />
<link rel="stylesheet" href="{{ "css/syntax.css" | relURL }}" />
<link rel="stylesheet" href="{{ "css/style.css" | relURL }}" />
<script src="{{ "js/copy-code-block.js" | relURL }}"></script>
<link rel="shortcut icon" href="{{ "images/favicon.ico" | relURL }}" type="image/x-icon" />

View file

@ -447,17 +447,23 @@ body {
}
/* keep in style with highlighting */
.content pre { padding: 7px; }
.content pre {
background-color: var(--color-bg-block);
border-radius: 3px;
/* The copy button with absolute position need this.
* https://developer.mozilla.org/en-US/docs/Web/CSS/position
* https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
*/
position: relative;
}
.content pre code {
display: block;
padding: var(--len-3);
border: none;
background-color: var(--color-bg-block);
border-radius: 3px;
background-color: unset;
overflow: auto;
width: 100%;
}
@ -547,7 +553,6 @@ body {
{ visibility: visible }
.highlight pre {
padding: 7px;
overflow-x: auto;
}
@ -556,6 +561,24 @@ body {
overflow-x: auto;
}
/* the copy button added by /js/copy-code-button.js */
pre .copyCodeButton {
position: absolute;
top: var(--len-1);
right: var(--len-3);
font-family: var(--fonts-mono);
color: var(--color-fg-hyperlink);
cursor: pointer;
visibility: hidden;
}
pre:hover .copyCodeButton {
visibility: visible;
}
pre .copyCodeButton:hover {
color: var(--color-fg-hyperlink-hover);
}
/**************************/
/* setup list page layout */
/**************************/
@ -687,12 +710,6 @@ body {
width: 85%;
}
/* keep content style from being affected by remark42 style */
.content pre {
background-color: transparent;
color: var(--color-fg-font-normal)
}
/**********/
/** misc **/
/**********/

View file

@ -0,0 +1,36 @@
/*
* Every codeblock has "pre > code" structure, some highlighted codeblocks have
* "div.highlight > pre.chroma > code" structure. So, use the simple CSS selector
* to query all codeblocks.
*/
document.addEventListener("DOMContentLoaded",
() => {
var codeblocks = document.querySelectorAll(".single .content pre code");
console.log("codeblocks length:", codeblocks.length);
codeblocks.forEach(
(codeblock) => {
let elementPre = codeblock.parentElement;
let button = document.createElement("div");
button.classList.add("copyCodeButton");
button.innerHTML = "copy";
button.addEventListener("click",
() => {
navigator.clipboard.writeText(codeblock.textContent);
button.innerHTML = "copied!";
setTimeout(
() => { button.innerHTML = "copy"; },
1000
);
}
);
elementPre.appendChild(button);
}
);
}
);