Compare commits
4 commits
Author | SHA1 | Date | |
---|---|---|---|
acba79eebc | |||
a1aec229c5 | |||
36c140b28c | |||
d647841898 |
|
@ -9,7 +9,8 @@ katex: true
|
||||||
draft: false
|
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-->
|
<!--more-->
|
||||||
|
|
||||||
|
@ -20,7 +21,8 @@ $$
|
||||||
## The code which render the above
|
## 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}
|
\pi=\int_{-\infty}^\infty\frac{dx}{1+x^2}
|
||||||
|
|
|
@ -51,7 +51,7 @@
|
||||||
|
|
||||||
<!-- To automatically render math in text elements, include the auto-render extension: -->
|
<!-- To automatically render math in text elements, include the auto-render extension: -->
|
||||||
<script defer src="{{ "lib/katex/contrib/auto-render.min.js" | relURL }}"
|
<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 }}
|
{{ end }}
|
||||||
|
|
||||||
{{ with and .Site.Params.remark42 .Params.show_comments }}
|
{{ 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="{{ "lib/icofont/icofont.min.css" | relURL }}" />
|
||||||
<link rel="stylesheet" href="{{ "css/syntax.css" | relURL }}" />
|
<link rel="stylesheet" href="{{ "css/syntax.css" | relURL }}" />
|
||||||
<link rel="stylesheet" href="{{ "css/style.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" />
|
<link rel="shortcut icon" href="{{ "images/favicon.ico" | relURL }}" type="image/x-icon" />
|
||||||
|
|
|
@ -447,17 +447,23 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* keep in style with highlighting */
|
/* 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 {
|
.content pre code {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
padding: var(--len-3);
|
padding: var(--len-3);
|
||||||
|
|
||||||
border: none;
|
border: none;
|
||||||
background-color: var(--color-bg-block);
|
background-color: unset;
|
||||||
border-radius: 3px;
|
|
||||||
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -547,7 +553,6 @@ body {
|
||||||
{ visibility: visible }
|
{ visibility: visible }
|
||||||
|
|
||||||
.highlight pre {
|
.highlight pre {
|
||||||
padding: 7px;
|
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -556,6 +561,24 @@ body {
|
||||||
overflow-x: auto;
|
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 */
|
/* setup list page layout */
|
||||||
/**************************/
|
/**************************/
|
||||||
|
@ -687,12 +710,6 @@ body {
|
||||||
width: 85%;
|
width: 85%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* keep content style from being affected by remark42 style */
|
|
||||||
.content pre {
|
|
||||||
background-color: transparent;
|
|
||||||
color: var(--color-fg-font-normal)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**********/
|
/**********/
|
||||||
/** misc **/
|
/** misc **/
|
||||||
/**********/
|
/**********/
|
||||||
|
|
36
static/js/copy-code-block.js
Normal file
36
static/js/copy-code-block.js
Normal 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);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
Loading…
Reference in a new issue