Tommy's Blog
TommyZeng
2022-04-26
目录

博客中插入HTML的方法

# 前言 ( 持续更新，先更新到这先 )

本身 hexo 是可以直接渲染 md 文件的，不过格式问题我在正经人中也有有提到，相信也会有人遇到和我同样的情形, 写点东西很多特殊格式得按主题要求的来, 一来二去还得写两个版本，结果发现不如简单粗暴的直接插入html，把自己想要的样式直接生成 html 文件放到博客中不就完美啦？因为本质上 hexo 也是把 md 渲染成 html 文件然后上传，打开网页更多像是在打开某个已经准备的好的 html

下面就来分享一下我这段时间研究的各种插入 html 的奇葩方法

重要提示

目前能完美支持 html 插入的主题我暂时只知道 Fluid 主题 和 butterfly 主题 (opens new window) 别的主题也会有一些可以的，不过最好准备一个测试用的 HTML 文件 这里提供一个我自己生成的 22 年最新版 Hexo 部署教程-Win (opens new window)



# 不完美的

# 使用iframe 组件

插入很多文件惯用的方法

前置条件

我把源文件放在了 \Blog\Source\HTML 里, 并在通用配置文件_config.yml里设置了禁止渲染此目录下的文件, 禁用渲染教程请看这篇文章Hexo跳过渲染教程 (opens new window) 正常的 iframe 有个问题是高度会自动限制在 100 多 px,很影响体验，直接变成了画中画，如果想变成整个页面的一部分，高度跟随文档长度，请使用以下代码，自行替换 src 路径

<iframe src="/HTML/C-刷题笔记-持续更新。html"  style="width:100%" frameborder="0" scrolling="no" id="test" onload="this.height=100" ></iframe>
<script type="text/javascript">
function reinitIframe ( )
{
    var iframe = document.getElementById ( "test" ) ;
    try
        {
        var bHeight = iframe.contentWindow.document.body.scrollHeight;
        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
        var height = Math.max ( bHeight, dHeight ) ;
        iframe.height = height;
        console.log ( height ) ;
        }
        catch ( ex ) {}
}
window.setInterval ( "reinitIframe ( ) ", 200 ) ;
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

注意

下面的function是为了让iframe框框适应文章高度，要不然默认才100多px的像素高度 该方法的缺点:无法识别文章目录,字数



# 较完美的方案

目前是使用一款开源的md文档编辑器生成的html复制进要上传的文件中,可以实现较完美的效果

目前发现支持的有fluid和butterfly主题, 有些主题魔改较多需要自行尝试可否正常渲染, G不G的出来public文件

警告

缺点: 此方法并非完美无缺, 目前最大的问题是代码展示框无法显示代码语言类别和行号, 都显示是yaml, 不过有一键复制代码的按钮, 还算可以接受 所以请评估自己是否特别需要清晰的代码块


MD编辑器相关信息

名称: Yank Note GitHub链接: https://github.com/purocean/yn 作者博客: https://blog-purocean.vercel.app/

下载即可使用, 免费版也有绝大多数功能且完整可用, 完整版仅需38元, 理念特别不错, 安利大家用用 而且开发者可以直接微信找他, 有啥不懂都可以问, 全栈大佬


提示

这是 hexo跳过渲染 那篇文章的编辑格式, 几乎是直接复制生成的html即可

前面的前言部分是为了让文章封面摘要正常显示,否则可能会显示代码


# 代码实际演示，想测试的可以直接粘贴本代码到要post的md文档里渲染测试下

---
title: (Hexo)文件跳过渲染
date: 2022-04-10 15:57:37
tags: [操作分享,避坑指南]
---
## 前言
根目录下的`source`文件夹可以存放多类文件作为静态网站的资源库, 但是由于hexo的特性, 会把所有该目录下的文件渲染掉, 所以就要使用跳过渲染, 不过我发现网上教程有个点很容易坑人, 这里补充一下<!--more-->


<html xmlns="http://www.w3.org/1999/xhtml" lang xml:lang>
  <head>
    <meta charset="utf-8" />
    <meta name="generator" content="Yank Note" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <title>0410hexo跳过渲染的方法</title>
    <style>
          article.markdown-body { max-width: 980px; margin: 20px auto; }html { line-height: 1.15; text-size-adjust: 100%; }
body { margin: 0px; }
main { display: block; }
h1 { font-size: 2em; margin: 0.67em 0px; }
hr { box-sizing: content-box; height: 0px; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; }
abbr[title] { border-bottom: none; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0px; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { appearance: button; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0px; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0px; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration { appearance: none; }
::-webkit-file-upload-button { appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template { display: none; }
[hidden] { display: none; }
html[app-theme="light"]:root, :root { --g-background-color: #fff; --g-foreground-color: #24292f; --g-color-0: #24292f; --g-color-1: #262b31; --g-color-2: #282d33; --g-color-3: #2b2f35; --g-color-4: #2d3237; --g-color-5: #2f3439; --g-color-6: #31363b; --g-color-7: #33383e; --g-color-8: #363a40; --g-color-9: #383c42; --g-color-10: #3a3e44; --g-color-11: #3c4146; --g-color-12: #3e4348; --g-color-13: #40454a; --g-color-14: #43474c; --g-color-15: #45494e; --g-color-16: #474b50; --g-color-17: #494d52; --g-color-18: #4b5054; --g-color-19: #4e5257; --g-color-20: #505459; --g-color-21: #52565b; --g-color-22: #54585d; --g-color-23: #565a5f; --g-color-24: #595c61; --g-color-25: #5b5f63; --g-color-26: #5d6165; --g-color-27: #5f6367; --g-color-28: #616569; --g-color-29: #64676b; --g-color-30: #66696d; --g-color-31: #686b6f; --g-color-32: #6a6d72; --g-color-33: #6c7074; --g-color-34: #6e7276; --g-color-35: #717478; --g-color-36: #73767a; --g-color-37: #75787c; --g-color-38: #777a7e; --g-color-39: #797c80; --g-color-40: #7c7f82; --g-color-41: #7e8184; --g-color-42: #808386; --g-color-43: #828588; --g-color-44: #84878b; --g-color-45: #87898d; --g-color-46: #898b8f; --g-color-47: #8b8e91; --g-color-48: #8d9093; --g-color-49: #8f9295; --g-color-50: #929497; --g-color-51: #949699; --g-color-52: #96989b; --g-color-53: #989a9d; --g-color-54: #9a9d9f; --g-color-55: #9c9fa1; --g-color-56: #9fa1a3; --g-color-57: #a1a3a6; --g-color-58: #a3a5a8; --g-color-59: #a5a7aa; --g-color-60: #a7a9ac; --g-color-61: #aaacae; --g-color-62: #acaeb0; --g-color-63: #aeb0b2; --g-color-64: #b0b2b4; --g-color-65: #b2b4b6; --g-color-66: #b5b6b8; --g-color-67: #b7b8ba; --g-color-68: #b9bbbc; --g-color-69: #bbbdbf; --g-color-70: #bdbfc1; --g-color-71: #bfc1c3; --g-color-72: #c2c3c5; --g-color-73: #c4c5c7; --g-color-74: #c6c7c9; --g-color-75: #c8cacb; --g-color-76: #cacccd; --g-color-77: #cdcecf; --g-color-78: #cfd0d1; --g-color-79: #d1d2d3; --g-color-80: #d3d4d5; --g-color-81: #d5d6d7; --g-color-82: #d8d8da; --g-color-83: #dadbdc; --g-color-84: #dcddde; --g-color-85: #dedfe0; --g-color-86: #e0e1e2; --g-color-87: #e3e3e4; --g-color-88: #e5e5e6; --g-color-89: #e7e7e8; --g-color-90: #e9eaea; --g-color-91: #ebecec; --g-color-92: #edeeee; --g-color-93: #f0f0f0; --g-color-94: #f2f2f3; --g-color-95: #f4f4f5; --g-color-96: #f6f6f7; --g-color-97: #f8f9f9; --g-color-98: #fbfbfb; --g-color-99: #fdfdfd; --g-color-100: white; --selection-color: rgba(86, 155, 214, 0.38); --scrollbar-shadow-color: rgba(36, 41, 47, 0.1); --scrollbar-track-background-color: rgba(36, 41, 47, 0.08); --scrollbar-thumb-background-color: rgba(36, 41, 47, 0.1); --scrollbar-thumb-hover-background-color: rgba(36, 41, 47, 0.3); --g-border-radius: 4px; }
html { outline: none; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; accent-color: rgb(20, 112, 251); }
::selection { background: var(--selection-color); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { border-radius: var(--g-border-radius); background: var(--scrollbar-track-background-color); box-shadow: inset 0 0 5px var(--scrollbar-shadow-color); }
::-webkit-scrollbar-thumb { border-radius: var(--g-border-radius); background: var(--scrollbar-thumb-background-color); box-shadow: inset 0 0 6px var(--scrollbar-shadow-color); }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover-background-color); }
.new-page { break-before: page; }
.bgw { background-color: rgb(255, 255, 255) !important; }
.inline { display: inline !important; }
.block { display: block !important; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.with-border { border: 1px solid var(--g-color-80); border-radius: var(--g-border-radius); }
.katex { text-rendering: auto; font: 1.21em / 1.2 KaTeX_Main, "Times New Roman", serif; text-indent: 0px; }
.katex * { border-color: currentcolor; }
.katex .katex-version::after { content: "0.15.2"; }
.katex .katex-mathml { clip: rect(1px, 1px, 1px, 1px); border: 0px; height: 1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; }
.katex .katex-html > .newline { display: block; }
.katex .base { position: relative; white-space: nowrap; width: min-content; }
.katex .base, .katex .strut { display: inline-block; }
.katex .textbf { font-weight: 700; }
.katex .textit { font-style: italic; }
.katex .textrm { font-family: KaTeX_Main; }
.katex .textsf { font-family: KaTeX_SansSerif; }
.katex .texttt { font-family: KaTeX_Typewriter; }
.katex .mathnormal { font-family: KaTeX_Math; font-style: italic; }
.katex .mathit { font-family: KaTeX_Main; font-style: italic; }
.katex .mathrm { font-style: normal; }
.katex .mathbf { font-family: KaTeX_Main; font-weight: 700; }
.katex .boldsymbol { font-family: KaTeX_Math; font-style: italic; font-weight: 700; }
.katex .amsrm, .katex .mathbb, .katex .textbb { font-family: KaTeX_AMS; }
.katex .mathcal { font-family: KaTeX_Caligraphic; }
.katex .mathfrak, .katex .textfrak { font-family: KaTeX_Fraktur; }
.katex .mathtt { font-family: KaTeX_Typewriter; }
.katex .mathscr, .katex .textscr { font-family: KaTeX_Script; }
.katex .mathsf, .katex .textsf { font-family: KaTeX_SansSerif; }
.katex .mathboldsf, .katex .textboldsf { font-family: KaTeX_SansSerif; font-weight: 700; }
.katex .mathitsf, .katex .textitsf { font-family: KaTeX_SansSerif; font-style: italic; }
.katex .mainrm { font-family: KaTeX_Main; font-style: normal; }
.katex .vlist-t { border-collapse: collapse; display: inline-table; table-layout: fixed; }
.katex .vlist-r { display: table-row; }
.katex .vlist { display: table-cell; position: relative; vertical-align: bottom; }
.katex .vlist > span { display: block; height: 0px; position: relative; }
.katex .vlist > span > span { display: inline-block; }
.katex .vlist > span > .pstrut { overflow: hidden; width: 0px; }
.katex .vlist-t2 { margin-right: -2px; }
.katex .vlist-s { display: table-cell; font-size: 1px; min-width: 2px; vertical-align: bottom; width: 2px; }
.katex .vbox { align-items: baseline; display: inline-flex; flex-direction: column; }
.katex .hbox { width: 100%; }
.katex .hbox, .katex .thinbox { display: inline-flex; flex-direction: row; }
.katex .thinbox { max-width: 0px; width: 0px; }
.katex .msupsub { text-align: left; }
.katex .mfrac > span > span { text-align: center; }
.katex .mfrac .frac-line { border-bottom-style: solid; display: inline-block; width: 100%; }
.katex .hdashline, .katex .hline, .katex .mfrac .frac-line, .katex .overline .overline-line, .katex .rule, .katex .underline .underline-line { min-height: 1px; }
.katex .mspace { display: inline-block; }
.katex .clap, .katex .llap, .katex .rlap { position: relative; width: 0px; }
.katex .clap > .inner, .katex .llap > .inner, .katex .rlap > .inner { position: absolute; }
.katex .clap > .fix, .katex .llap > .fix, .katex .rlap > .fix { display: inline-block; }
.katex .llap > .inner { right: 0px; }
.katex .clap > .inner, .katex .rlap > .inner { left: 0px; }
.katex .clap > .inner > span { margin-left: -50%; margin-right: 50%; }
.katex .rule { border: 0px solid; display: inline-block; position: relative; }
.katex .hline, .katex .overline .overline-line, .katex .underline .underline-line { border-bottom-style: solid; display: inline-block; width: 100%; }
.katex .hdashline { border-bottom-style: dashed; display: inline-block; width: 100%; }
.katex .sqrt > .root { margin-left: 0.277778em; margin-right: -0.555556em; }
.katex .fontsize-ensurer.reset-size1.size1, .katex .sizing.reset-size1.size1 { font-size: 1em; }
.katex .fontsize-ensurer.reset-size1.size2, .katex .sizing.reset-size1.size2 { font-size: 1.2em; }
.katex .fontsize-ensurer.reset-size1.size3, .katex .sizing.reset-size1.size3 { font-size: 1.4em; }
.katex .fontsize-ensurer.reset-size1.size4, .katex .sizing.reset-size1.size4 { font-size: 1.6em; }
.katex .fontsize-ensurer.reset-size1.size5, .katex .sizing.reset-size1.size5 { font-size: 1.8em; }
.katex .fontsize-ensurer.reset-size1.size6, .katex .sizing.reset-size1.size6 { font-size: 2em; }
.katex .fontsize-ensurer.reset-size1.size7, .katex .sizing.reset-size1.size7 { font-size: 2.4em; }
.katex .fontsize-ensurer.reset-size1.size8, .katex .sizing.reset-size1.size8 { font-size: 2.88em; }
.katex .fontsize-ensurer.reset-size1.size9, .katex .sizing.reset-size1.size9 { font-size: 3.456em; }
.katex .fontsize-ensurer.reset-size1.size10, .katex .sizing.reset-size1.size10 { font-size: 4.148em; }
.katex .fontsize-ensurer.reset-size1.size11, .katex .sizing.reset-size1.size11 { font-size: 4.976em; }
.katex .fontsize-ensurer.reset-size2.size1, .katex .sizing.reset-size2.size1 { font-size: 0.833333em; }
.katex .fontsize-ensurer.reset-size2.size2, .katex .sizing.reset-size2.size2 { font-size: 1em; }
.katex .fontsize-ensurer.reset-size2.size3, .katex .sizing.reset-size2.size3 { font-size: 1.16667em; }
.katex .fontsize-ensurer.reset-size2.size4, .katex .sizing.reset-size2.size4 { font-size: 1.33333em; }
.katex .fontsize-ensurer.reset-size2.size5, .katex .sizing.reset-size2.size5 { font-size: 1.5em; }
.katex .fontsize-ensurer.reset-size2.size6, .katex .sizing.reset-size2.size6 { font-size: 1.66667em; }
.katex .fontsize-ensurer.reset-size2.size7, .katex .sizing.reset-size2.size7 { font-size: 2em; }
.katex .fontsize-ensurer.reset-size2.size8, .katex .sizing.reset-size2.size8 { font-size: 2.4em; }
.katex .fontsize-ensurer.reset-size2.size9, .katex .sizing.reset-size2.size9 { font-size: 2.88em; }
.katex .fontsize-ensurer.reset-size2.size10, .katex .sizing.reset-size2.size10 { font-size: 3.45667em; }
.katex .fontsize-ensurer.reset-size2.size11, .katex .sizing.reset-size2.size11 { font-size: 4.14667em; }
.katex .fontsize-ensurer.reset-size3.size1, .katex .sizing.reset-size3.size1 { font-size: 0.714286em; }
.katex .fontsize-ensurer.reset-size3.size2, .katex .sizing.reset-size3.size2 { font-size: 0.857143em; }
.katex .fontsize-ensurer.reset-size3.size3, .katex .sizing.reset-size3.size3 { font-size: 1em; }
.katex .fontsize-ensurer.reset-size3.size4, .katex .sizing.reset-size3.size4 { font-size: 1.14286em; }
.katex .fontsize-ensurer.reset-size3.size5, .katex .sizing.reset-size3.size5 { font-size: 1.28571em; }
.katex .fontsize-ensurer.reset-size3.size6, .katex .sizing.reset-size3.size6 { font-size: 1.42857em; }
.katex .fontsize-ensurer.reset-size3.size7, .katex .sizing.reset-size3.size7 { font-size: 1.71429em; }
.katex .fontsize-ensurer.reset-size3.size8, .katex .sizing.reset-size3.size8 { font-size: 2.05714em; }
.katex .fontsize-ensurer.reset-size3.size9, .katex .sizing.reset-size3.size9 { font-size: 2.46857em; }
.katex .fontsize-ensurer.reset-size3.size10, .katex .sizing.reset-size3.size10 { font-size: 2.96286em; }
.katex .fontsize-ensurer.reset-size3.size11, .katex .sizing.reset-size3.size11 { font-size: 3.55429em; }
.katex .fontsize-ensurer.reset-size4.size1, .katex .sizing.reset-size4.size1 { font-size: 0.625em; }
.katex .fontsize-ensurer.reset-size4.size2, .katex .sizing.reset-size4.size2 { font-size: 0.75em; }
.katex .fontsize-ensurer.reset-size4.size3, .katex .sizing.reset-size4.size3 { font-size: 0.875em; }
.katex .fontsize-ensurer.reset-size4.size4, .katex .sizing.reset-size4.size4 { font-size: 1em; }
.katex .fontsize-ensurer.reset-size4.size5, .katex .sizing.reset-size4.size5 { font-size: 1.125em; }
.katex .fontsize-ensurer.reset-size4.size6, .katex .sizing.reset-size4.size6 { font-size: 1.25em; }
.katex .fontsize-ensurer.reset-size4.size7, .katex .sizing.reset-size4.size7 { font-size: 1.5em; }
.katex .fontsize-ensurer.reset-size4.size8, .katex .sizing.reset-size4.size8 { font-size: 1.8em; }
.katex .fontsize-ensurer.reset-size4.size9, .katex .sizing.reset-size4.size9 { font-size: 2.16em; }
.katex .fontsize-ensurer.reset-size4.size10, .katex .sizing.reset-size4.size10 { font-size: 2.5925em; }
.katex .fontsize-ensurer.reset-size4.size11, .katex .sizing.reset-size4.size11 { font-size: 3.11em; }
.katex .fontsize-ensurer.reset-size5.size1, .katex .sizing.reset-size5.size1 { font-size: 0.555556em; }
.katex .fontsize-ensurer.reset-size5.size2, .katex .sizing.reset-size5.size2 { font-size: 0.666667em; }
.katex .fontsize-ensurer.reset-size5.size3, .katex .sizing.reset-size5.size3 { font-size: 0.777778em; }
.katex .fontsize-ensurer.reset-size5.size4, .katex .sizing.reset-size5.size4 { font-size: 0.888889em; }
.katex .fontsize-ensurer.reset-size5.size5, .katex .sizing.reset-size5.size5 { font-size: 1em; }
.katex .fontsize-ensurer.reset-size5.size6, .katex .sizing.reset-size5.size6 { font-size: 1.11111em; }
.katex .fontsize-ensurer.reset-size5.size7, .katex .sizing.reset-size5.size7 { font-size: 1.33333em; }
.katex .fontsize-ensurer.reset-size5.size8, .katex .sizing.reset-size5.size8 { font-size: 1.6em; }
.katex .fontsize-ensurer.reset-size5.size9, .katex .sizing.reset-size5.size9 { font-size: 1.92em; }
.katex .fontsize-ensurer.reset-size5.size10, .katex .sizing.reset-size5.size10 { font-size: 2.30444em; }
.katex .fontsize-ensurer.reset-size5.size11, .katex .sizing.reset-size5.size11 { font-size: 2.76444em; }
.katex .fontsize-ensurer.reset-size6.size1, .katex .sizing.reset-size6.size1 { font-size: 0.5em; }
.katex .fontsize-ensurer.reset-size6.size2, .katex .sizing.reset-size6.size2 { font-size: 0.6em; }
.katex .fontsize-ensurer.reset-size6.size3, .katex .sizing.reset-size6.size3 { font-size: 0.7em; }
.katex .fontsize-ensurer.reset-size6.size4, .katex .sizing.reset-size6.size4 { font-size: 0.8em; }
.katex .fontsize-ensurer.reset-size6.size5, .katex .sizing.reset-size6.size5 { font-size: 0.9em; }
.katex .fontsize-ensurer.reset-size6.size6, .katex .sizing.reset-size6.size6 { font-size: 1em; }
.katex .fontsize-ensurer.reset-size6.size7, .katex .sizing.reset-size6.size7 { font-size: 1.2em; }
.katex .fontsize-ensurer.reset-size6.size8, .katex .sizing.reset-size6.size8 { font-size: 1.44em; }
.katex .fontsize-ensurer.reset-size6.size9, .katex .sizing.reset-size6.size9 { font-size: 1.728em; }
.katex .fontsize-ensurer.reset-size6.size10, .katex .sizing.reset-size6.size10 { font-size: 2.074em; }
.katex .fontsize-ensurer.reset-size6.size11, .katex .sizing.reset-size6.size11 { font-size: 2.488em; }
.katex .fontsize-ensurer.reset-size7.size1, .katex .sizing.reset-size7.size1 { font-size: 0.416667em; }
.katex .fontsize-ensurer.reset-size7.size2, .katex .sizing.reset-size7.size2 { font-size: 0.5em; }
.katex .fontsize-ensurer.reset-size7.size3, .katex .sizing.reset-size7.size3 { font-size: 0.583333em; }
.katex .fontsize-ensurer.reset-size7.size4, .katex .sizing.reset-size7.size4 { font-size: 0.666667em; }
.katex .fontsize-ensurer.reset-size7.size5, .katex .sizing.reset-size7.size5 { font-size: 0.75em; }
.katex .fontsize-ensurer.reset-size7.size6, .katex .sizing.reset-size7.size6 { font-size: 0.833333em; }
.katex .fontsize-ensurer.reset-size7.size7, .katex .sizing.reset-size7.size7 { font-size: 1em; }
.katex .fontsize-ensurer.reset-size7.size8, .katex .sizing.reset-size7.size8 { font-size: 1.2em; }
.katex .fontsize-ensurer.reset-size7.size9, .katex .sizing.reset-size7.size9 { font-size: 1.44em; }
.katex .fontsize-ensurer.reset-size7.size10, .katex .sizing.reset-size7.size10 { font-size: 1.72833em; }
.katex .fontsize-ensurer.reset-size7.size11, .katex .sizing.reset-size7.size11 { font-size: 2.07333em; }
.katex .fontsize-ensurer.reset-size8.size1, .katex .sizing.reset-size8.size1 { font-size: 0.347222em; }
.katex .fontsize-ensurer.reset-size8.size2, .katex .sizing.reset-size8.size2 { font-size: 0.416667em; }
.katex .fontsize-ensurer.reset-size8.size3, .katex .sizing.reset-size8.size3 { font-size: 0.486111em; }
.katex .fontsize-ensurer.reset-size8.size4, .katex .sizing.reset-size8.size4 { font-size: 0.555556em; }
.katex .fontsize-ensurer.reset-size8.size5, .katex .sizing.reset-size8.size5 { font-size: 0.625em; }
.katex .fontsize-ensurer.reset-size8.size6, .katex .sizing.reset-size8.size6 { font-size: 0.694444em; }
.katex .fontsize-ensurer.reset-size8.size7, .katex .sizing.reset-size8.size7 { font-size: 0.833333em; }
.katex .fontsize-ensurer.reset-size8.size8, .katex .sizing.reset-size8.size8 { font-size: 1em; }
.katex .fontsize-ensurer.reset-size8.size9, .katex .sizing.reset-size8.size9 { font-size: 1.2em; }
.katex .fontsize-ensurer.reset-size8.size10, .katex .sizing.reset-size8.size10 { font-size: 1.44028em; }
.katex .fontsize-ensurer.reset-size8.size11, .katex .sizing.reset-size8.size11 { font-size: 1.72778em; }
.katex .fontsize-ensurer.reset-size9.size1, .katex .sizing.reset-size9.size1 { font-size: 0.289352em; }
.katex .fontsize-ensurer.reset-size9.size2, .katex .sizing.reset-size9.size2 { font-size: 0.347222em; }
.katex .fontsize-ensurer.reset-size9.size3, .katex .sizing.reset-size9.size3 { font-size: 0.405093em; }
.katex .fontsize-ensurer.reset-size9.size4, .katex .sizing.reset-size9.size4 { font-size: 0.462963em; }
.katex .fontsize-ensurer.reset-size9.size5, .katex .sizing.reset-size9.size5 { font-size: 0.520833em; }
.katex .fontsize-ensurer.reset-size9.size6, .katex .sizing.reset-size9.size6 { font-size: 0.578704em; }
.katex .fontsize-ensurer.reset-size9.size7, .katex .sizing.reset-size9.size7 { font-size: 0.694444em; }
.katex .fontsize-ensurer.reset-size9.size8, .katex .sizing.reset-size9.size8 { font-size: 0.833333em; }
.katex .fontsize-ensurer.reset-size9.size9, .katex .sizing.reset-size9.size9 { font-size: 1em; }
.katex .fontsize-ensurer.reset-size9.size10, .katex .sizing.reset-size9.size10 { font-size: 1.20023em; }
.katex .fontsize-ensurer.reset-size9.size11, .katex .sizing.reset-size9.size11 { font-size: 1.43981em; }
.katex .fontsize-ensurer.reset-size10.size1, .katex .sizing.reset-size10.size1 { font-size: 0.24108em; }
.katex .fontsize-ensurer.reset-size10.size2, .katex .sizing.reset-size10.size2 { font-size: 0.289296em; }
.katex .fontsize-ensurer.reset-size10.size3, .katex .sizing.reset-size10.size3 { font-size: 0.337512em; }
.katex .fontsize-ensurer.reset-size10.size4, .katex .sizing.reset-size10.size4 { font-size: 0.385728em; }
.katex .fontsize-ensurer.reset-size10.size5, .katex .sizing.reset-size10.size5 { font-size: 0.433944em; }
.katex .fontsize-ensurer.reset-size10.size6, .katex .sizing.reset-size10.size6 { font-size: 0.48216em; }
.katex .fontsize-ensurer.reset-size10.size7, .katex .sizing.reset-size10.size7 { font-size: 0.578592em; }
.katex .fontsize-ensurer.reset-size10.size8, .katex .sizing.reset-size10.size8 { font-size: 0.694311em; }
.katex .fontsize-ensurer.reset-size10.size9, .katex .sizing.reset-size10.size9 { font-size: 0.833173em; }
.katex .fontsize-ensurer.reset-size10.size10, .katex .sizing.reset-size10.size10 { font-size: 1em; }
.katex .fontsize-ensurer.reset-size10.size11, .katex .sizing.reset-size10.size11 { font-size: 1.19961em; }
.katex .fontsize-ensurer.reset-size11.size1, .katex .sizing.reset-size11.size1 { font-size: 0.200965em; }
.katex .fontsize-ensurer.reset-size11.size2, .katex .sizing.reset-size11.size2 { font-size: 0.241158em; }
.katex .fontsize-ensurer.reset-size11.size3, .katex .sizing.reset-size11.size3 { font-size: 0.28135em; }
.katex .fontsize-ensurer.reset-size11.size4, .katex .sizing.reset-size11.size4 { font-size: 0.321543em; }
.katex .fontsize-ensurer.reset-size11.size5, .katex .sizing.reset-size11.size5 { font-size: 0.361736em; }
.katex .fontsize-ensurer.reset-size11.size6, .katex .sizing.reset-size11.size6 { font-size: 0.401929em; }
.katex .fontsize-ensurer.reset-size11.size7, .katex .sizing.reset-size11.size7 { font-size: 0.482315em; }
.katex .fontsize-ensurer.reset-size11.size8, .katex .sizing.reset-size11.size8 { font-size: 0.578778em; }
.katex .fontsize-ensurer.reset-size11.size9, .katex .sizing.reset-size11.size9 { font-size: 0.694534em; }
.katex .fontsize-ensurer.reset-size11.size10, .katex .sizing.reset-size11.size10 { font-size: 0.833601em; }
.katex .fontsize-ensurer.reset-size11.size11, .katex .sizing.reset-size11.size11 { font-size: 1em; }
.katex .delimsizing.size1 { font-family: KaTeX_Size1; }
.katex .delimsizing.size2 { font-family: KaTeX_Size2; }
.katex .delimsizing.size3 { font-family: KaTeX_Size3; }
.katex .delimsizing.size4 { font-family: KaTeX_Size4; }
.katex .delimsizing.mult .delim-size1 > span { font-family: KaTeX_Size1; }
.katex .delimsizing.mult .delim-size4 > span { font-family: KaTeX_Size4; }
.katex .nulldelimiter { display: inline-block; width: 0.12em; }
.katex .delimcenter, .katex .op-symbol { position: relative; }
.katex .op-symbol.small-op { font-family: KaTeX_Size1; }
.katex .op-symbol.large-op { font-family: KaTeX_Size2; }
.katex .accent > .vlist-t, .katex .op-limits > .vlist-t { text-align: center; }
.katex .accent .accent-body { position: relative; }
.katex .accent .accent-body:not(.accent-full) { width: 0px; }
.katex .overlay { display: block; }
.katex .mtable .vertical-separator { display: inline-block; min-width: 1px; }
.katex .mtable .arraycolsep { display: inline-block; }
.katex .mtable .col-align-c > .vlist-t { text-align: center; }
.katex .mtable .col-align-l > .vlist-t { text-align: left; }
.katex .mtable .col-align-r > .vlist-t { text-align: right; }
.katex .svg-align { text-align: left; }
.katex svg { fill: currentcolor; stroke: currentcolor; fill-rule: nonzero; fill-opacity: 1; stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1; display: block; height: inherit; position: absolute; width: 100%; }
.katex svg path { stroke: none; }
.katex img { border-style: none; max-height: none; max-width: none; min-height: 0px; min-width: 0px; }
.katex .stretchy { display: block; overflow: hidden; position: relative; width: 100%; }
.katex .stretchy::after, .katex .stretchy::before { content: ""; }
.katex .hide-tail { overflow: hidden; position: relative; width: 100%; }
.katex .halfarrow-left { left: 0px; overflow: hidden; position: absolute; width: 50.2%; }
.katex .halfarrow-right { overflow: hidden; position: absolute; right: 0px; width: 50.2%; }
.katex .brace-left { left: 0px; overflow: hidden; position: absolute; width: 25.1%; }
.katex .brace-center { left: 25%; overflow: hidden; position: absolute; width: 50%; }
.katex .brace-right { overflow: hidden; position: absolute; right: 0px; width: 25.1%; }
.katex .x-arrow-pad { padding: 0px 0.5em; }
.katex .cd-arrow-pad { padding: 0px 0.55556em 0px 0.27778em; }
.katex .mover, .katex .munder, .katex .x-arrow { text-align: center; }
.katex .boxpad { padding: 0px 0.3em; }
.katex .fbox, .katex .fcolorbox { border: 0.04em solid; box-sizing: border-box; }
.katex .cancel-pad { padding: 0px 0.2em; }
.katex .cancel-lap { margin-left: -0.2em; margin-right: -0.2em; }
.katex .sout { border-bottom-style: solid; border-bottom-width: 0.08em; }
.katex .angl { border-right: 0.049em solid; border-top: 0.049em solid; box-sizing: border-box; margin-right: 0.03889em; }
.katex .anglpad { padding: 0px 0.03889em; }
.katex .eqn-num::before { content: "(" counter(katexEqnNo) ")"; counter-increment: katexEqnNo 1; }
.katex .mml-eqn-num::before { content: "(" counter(mmlEqnNo) ")"; counter-increment: mmlEqnNo 1; }
.katex .mtr-glue { width: 50%; }
.katex .cd-vert-arrow { display: inline-block; position: relative; }
.katex .cd-label-left { display: inline-block; position: absolute; right: calc(50% + 0.3em); text-align: left; }
.katex .cd-label-right { display: inline-block; left: calc(50% + 0.3em); position: absolute; text-align: right; }
.katex-display { display: block; margin: 1em 0px; text-align: center; }
.katex-display > .katex { display: block; text-align: center; white-space: nowrap; }
.katex-display > .katex > .katex-html { display: block; position: relative; }
.katex-display > .katex > .katex-html > .tag { position: absolute; right: 0px; }
.katex-display.leqno > .katex > .katex-html > .tag { left: 0px; right: auto; }
.katex-display.fleqn > .katex { padding-left: 2em; text-align: left; }
.markdown-view.presentation .markdown-body[data-v-3f35add1] { margin-top: 0px; }
.markdown-body { position: relative; }
.markdown-body mark { background: rgb(255, 248, 197) !important; }
.markdown-body fieldset { border-style: solid; border-radius: var(--g-border-radius); margin: 20px 0px; }
.markdown-body fieldset legend { padding: 0px 0.2em; }
.markdown-body table { display: table; }
.markdown-body hr { border-bottom: 1px solid; }
.markdown-body img { display: block; margin-left: auto; margin-right: auto; }
.markdown-body img.inline, .markdown-body img[src*=".inline"], .markdown-body img[origin-src*=".inline"] { display: inline; background: unset; }
.markdown-body img.bgw, .markdown-body img[src*=".bgw"], .markdown-body img[origin-src*=".bgw"] { background-color: rgb(255, 255, 255); }
.markdown-body a:not([href^="#fn"])[href^="#"]::after { width: 11px; content: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20data-prefix%3D%22far%22%20data-icon%3D%22anchor%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%20class%3D%22svg-inline--fa%20fa-anchor%20fa-w-18%22%3E%3Cpath%20fill%3D%22%23999999%22%20d%3D%22M571.515%20331.515l-67.029-67.029c-4.686-4.686-12.284-4.686-16.971%200l-67.029%2067.029c-7.56%207.56-2.206%2020.485%208.485%2020.485h44.268C453.531%20417.326%20380.693%20456.315%20312%20462.865V216h60c6.627%200%2012-5.373%2012-12v-24c0-6.627-5.373-12-12-12h-60v-11.668c32.456-10.195%2056-40.512%2056-76.332%200-44.183-35.817-80-80-80s-80%2035.817-80%2080c0%2035.82%2023.544%2066.138%2056%2076.332V168h-60c-6.627%200-12%205.373-12%2012v24c0%206.627%205.373%2012%2012%2012h60v246.865C195.192%20456.304%20122.424%20417.176%20102.762%20352h44.268c10.691%200%2016.045-12.926%208.485-20.485l-67.029-67.029c-4.686-4.686-12.284-4.686-16.971%200l-67.03%2067.029C-3.074%20339.074%202.28%20352%2012.971%20352h40.284C73.657%20451.556%20181.238%20512%20288%20512c113.135%200%20215.338-65.3%20234.745-160h40.284c10.691%200%2016.045-12.926%208.486-20.485zM288%2048c17.645%200%2032%2014.355%2032%2032s-14.355%2032-32%2032-32-14.355-32-32%2014.355-32%2032-32z%22%20class%3D%22%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); box-sizing: content-box; padding-left: 1px; padding-right: 1px; display: inline-block; vertical-align: baseline; }
.markdown-body a[href$=".md"]::after, .markdown-body a[href*=".md#"]::after { width: 9px; content: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20data-prefix%3D%22far%22%20data-icon%3D%22file-alt%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%20class%3D%22svg-inline--fa%20fa-file-alt%20fa-w-12%22%3E%3Cpath%20fill%3D%22%23999999%22%20d%3D%22M288%20248v28c0%206.6-5.4%2012-12%2012H108c-6.6%200-12-5.4-12-12v-28c0-6.6%205.4-12%2012-12h168c6.6%200%2012%205.4%2012%2012zm-12%2072H108c-6.6%200-12%205.4-12%2012v28c0%206.6%205.4%2012%2012%2012h168c6.6%200%2012-5.4%2012-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0%2026.5-21.5%2048-48%2048H48c-26.5%200-48-21.5-48-48V48C0%2021.5%2021.5%200%2048%200h204.1C264.8%200%20277%205.1%20286%2014.1L369.9%2098c9%208.9%2014.1%2021.2%2014.1%2033.9zm-128-80V128h76.1L256%2051.9zM336%20464V176H232c-13.3%200-24-10.7-24-24V48H48v416h288z%22%20class%3D%22%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); box-sizing: content-box; padding-left: 2px; padding-right: 2px; display: inline-block; vertical-align: baseline; }
.markdown-body a[href^="//"]::after, .markdown-body a[href^="http://"]::after, .markdown-body a[href^="https://"]::after { width: 10px; content: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20data-prefix%3D%22far%22%20data-icon%3D%22external-link%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20class%3D%22svg-inline--fa%20fa-external-link%20fa-w-16%22%3E%3Cpath%20fill%3D%22%23999999%22%20d%3D%22M497.6%2C0%2C334.4.17A14.4%2C14.4%2C0%2C0%2C0%2C320%2C14.57V47.88a14.4%2C14.4%2C0%2C0%2C0%2C14.69%2C14.4l73.63-2.72%2C2.06%2C2.06L131.52%2C340.49a12%2C12%2C0%2C0%2C0%2C0%2C17l23%2C23a12%2C12%2C0%2C0%2C0%2C17%2C0L450.38%2C101.62l2.06%2C2.06-2.72%2C73.63A14.4%2C14.4%2C0%2C0%2C0%2C464.12%2C192h33.31a14.4%2C14.4%2C0%2C0%2C0%2C14.4-14.4L512%2C14.4A14.4%2C14.4%2C0%2C0%2C0%2C497.6%2C0ZM432%2C288H416a16%2C16%2C0%2C0%2C0-16%2C16V458a6%2C6%2C0%2C0%2C1-6%2C6H54a6%2C6%2C0%2C0%2C1-6-6V118a6%2C6%2C0%2C0%2C1%2C6-6H208a16%2C16%2C0%2C0%2C0%2C16-16V80a16%2C16%2C0%2C0%2C0-16-16H48A48%2C48%2C0%2C0%2C0%2C0%2C112V464a48%2C48%2C0%2C0%2C0%2C48%2C48H400a48%2C48%2C0%2C0%2C0%2C48-48V304A16%2C16%2C0%2C0%2C0%2C432%2C288Z%22%20class%3D%22%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); box-sizing: content-box; padding-left: 2px; padding-right: 2px; display: inline-block; vertical-align: baseline; }
.markdown-body table a::after { display: none !important; }
.markdown-body .table-of-contents ol { counter-reset: ol-number 0; list-style-type: none; padding-left: 0px; }
.markdown-body .table-of-contents li > ol { padding-left: 2em; }
.markdown-body .table-of-contents ol > li::before { counter-increment: ol-number 1; content: counters(ol-number, ".") " "; }
.markdown-body .table-of-contents > ol > li::before { counter-increment: ol-number 1; content: counter(ol-number) ". "; }
.markdown-body .wrap-code { white-space: pre-wrap; }
.markdown-body table.hljs-ln { margin: 0px; border-collapse: separate; }
.markdown-body table.hljs-ln, .markdown-body table.hljs-ln tr, .markdown-body table.hljs-ln td { border: 0px; }
.markdown-body table.hljs-ln td { padding: 0px; }
.markdown-body table.hljs-ln tbody { display: table; min-width: 100%; }
.markdown-body table.hljs-ln td.hljs-ln-numbers { user-select: none; vertical-align: top; text-align: right; min-width: 2em; width: 2em; position: sticky; left: 0px; background-color: var(--g-color-96); box-shadow: -20px 0px 0px var(--g-color-96); border-right: 1px solid var(--g-color-86); }
.markdown-body table.hljs-ln td.hljs-ln-code { padding-left: 10px; }
.markdown-body table.hljs-ln .hljs-ln-n { padding-right: 8px; color: var(--g-color-40); }
.markdown-body table.hljs-ln .hljs-ln-n::before { content: attr(data-line-number); }
.markdown-body .wrap-code table.hljs-ln td { white-space: pre-wrap; box-shadow: none !important; }
.markdown-body table.small td, .markdown-body table.small th { padding: 3px 6px; font-size: 14px; line-height: 1.3; }
.markdown-body .footnote-backref { padding: 0px 4px; font-family: system-ui; vertical-align: middle; }
.markdown-body .katex { background: initial; }
.markdown-body .p-mcc-copy-btn-wrapper { width: 0px; height: 0px; position: sticky; left: 100%; top: 0px; float: right; }
.markdown-body .p-mcc-language { position: absolute; top: -11px; right: -8px; opacity: 1; color: var(--g-color-50); font-size: 12px; transition: opacity 200ms ease 0s; user-select: none; line-height: 1; }
.markdown-body .p-mcc-copy-btn { width: 20px; height: 20px; position: relative; right: 12px; top: -10px; padding: 6px; border-radius: 50%; opacity: 0; transition: opacity 200ms ease 0s; display: flex; align-items: center; color: var(--g-color-30) ; }
.markdown-body pre:hover .p-mcc-copy-btn { opacity: 1; }
.markdown-body pre:hover .p-mcc-language { opacity: 0; }
.markdown-body .p-mcc-copy-btn:hover { background: var(--g-color-80); }
.markdown-body .p-mcr-run-code-action { position: sticky; left: 0px; border-top: 1px dashed rgb(136, 136, 136); margin: 1em 0px; }
.markdown-body .p-mcr-run-btn { position: absolute; top: -0.7em; height: 0px; width: 0px; border-width: 0.6em 0px 0.6em 0.7em; border-left-style: solid; border-left-color: rgb(183, 179, 179); border-top-style: solid; border-top-color: rgba(221, 221, 221, 0); border-bottom-style: solid; border-bottom-color: rgba(221, 221, 221, 0); border-right-style: initial; border-right-color: initial; background: rgba(0, 0, 0, 0); cursor: pointer; outline: none; }
.markdown-body .p-mcr-run-xterm-btn { position: absolute; top: -0.5em; right: 0px; height: 0px; width: 0px; border-width: 0.6em 0px 0.6em 0.7em; border-left-style: solid; border-left-color: rgb(183, 179, 179); border-top-style: solid; border-top-color: rgba(221, 221, 221, 0); border-bottom-style: solid; border-bottom-color: rgba(221, 221, 221, 0); border-right-style: initial; border-right-color: initial; background: rgba(0, 0, 0, 0); cursor: pointer; outline: none; transform: rotate(90deg); }
.markdown-body .p-mcr-clear-btn-wrapper { width: 0px; height: 0px; position: sticky; left: 100%; bottom: 0px; float: right; }
.markdown-body .p-mcr-clear-btn { width: 20px; height: 20px; position: relative; right: 12px; bottom: 10px; padding: 6px; border-radius: 50%; transition: opacity 200ms ease 0s; display: flex; align-items: center; color: var(--g-color-30) ; }
.markdown-body .p-mcr-clear-btn:hover { background: var(--g-color-80); }
.markdown-body .wrap-code ~ .p-mcr-run-code-result { white-space: pre-wrap; }
.markdown-body .drawio-wrapper .drawio-action { position: absolute; right: 15px; top: 2px; z-index: 1; opacity: 0; transition: opacity 0.2s ease 0s; }
.markdown-body .drawio-wrapper:hover .drawio-action { opacity: 1; }
.markdown-body .mind-map { overflow: hidden; }
.markdown-body .mind-map > div { margin-top: -20px; }
.markdown-body .mind-map .mind-map-action { position: absolute; right: 10px; top: 23px; z-index: 1; text-align: right; background: transparent; opacity: 0; transition: opacity 0.2s ease 0s; }
.markdown-body .mind-map:hover .mind-map-action { opacity: 1; }
.markdown-body .echarts-wrapper { position: relative; }
.markdown-body .echarts-wrapper .echarts-action { position: absolute; right: 10px; top: 10px; z-index: 1; text-align: right; opacity: 0; transition: opacity 0.2s ease 0s; }
.markdown-body .echarts-wrapper:hover .echarts-action { opacity: 1; }
.markdown-body .echarts { width: 100%; height: 350px; }
.markdown-body .lucky-sheet-wrapper .lucky-sheet-action { position: absolute; right: 10px; top: 3px; z-index: 1; opacity: 0; transition: opacity 0.2s ease 0s; }
.markdown-body .lucky-sheet-wrapper:hover .lucky-sheet-action { opacity: 1; }
.markdown-body .custom-container.row { display: flex; justify-content: space-between; position: relative; margin-top: 16px; }
.markdown-body .custom-container.row.has-title { border-top: 24px solid transparent; }
.markdown-body .custom-container.row > .custom-container-title { background: var(--g-color-80); position: absolute; padding-left: 8px; margin: 0px; font-size: 14px; line-height: 2.2em; left: 0px; top: -2.2em; width: 100%; border: 1px solid var(--g-color-80); border-top-left-radius: var(--g-border-radius); border-top-right-radius: var(--g-border-radius); }
.markdown-body .custom-container.row > .custom-container.col > .custom-container-title { font-size: 14px; line-height: 1.2; }
.markdown-body .custom-container.col { width: 100%; padding: 12px 12px 0px; border: 1px solid var(--g-color-80); border-radius: var(--g-border-radius); margin-right: 8px; background: var(--g-color-100); }
.markdown-body .custom-container.row.has-title > .custom-container.col { margin-right: -1px; border-radius: 0px; }
.markdown-body .custom-container.col:last-of-type, .markdown-body .custom-container.row.has-title > .custom-container.col:last-of-type { margin-right: 0px; border-bottom-right-radius: var(--g-border-radius); }
.markdown-body .custom-container.row.has-title > .custom-container.col:first-of-type { border-bottom-left-radius: var(--g-border-radius); }
.markdown-body .custom-container.details, .markdown-body .custom-container.danger, .markdown-body .custom-container.warning, .markdown-body .custom-container.tip { padding: 16px 16px 2px; margin: 16px 0px; border-left-width: 8px; border-left-style: solid; border-radius: var(--g-border-radius); }
.markdown-body .custom-container-title { font-weight: 600; margin-bottom: 10px; margin-top: -6px; font-size: 1.1em; }
.markdown-body .custom-container.danger { border-color: rgb(204, 0, 0); background-color: rgb(255, 224, 224); color: rgb(102, 0, 0); }
.markdown-body .custom-container.warning { border-color: rgb(231, 192, 0); background-color: rgb(255, 250, 227); color: rgb(116, 96, 0); }
.markdown-body .custom-container.tip { border-color: rgb(66, 185, 131); background-color: var(--g-color-90); color: var(--g-color-10); }
.markdown-body .custom-container.details { border: none; background-color: var(--g-color-90); padding: 16px 20px; }
.markdown-body .custom-container.details > summary { margin-top: 0px; }
.markdown-body .custom-container.details > summary + *, .markdown-body .custom-container.details > :first-child:not(summary) { margin-top: 16px; }
.markdown-body .custom-container.details > :last-child:not(summary) { margin-bottom: 0px; }
.markdown-body .custom-container.group { position: relative; display: flex; flex-wrap: wrap; margin-bottom: 16px; background: var(--g-color-80); border-radius: var(--g-border-radius); border: 1px solid var(--g-color-80); }
.markdown-body .custom-container.group p { order: 100; width: 100%; }
.markdown-body .custom-container.group > .custom-container-title { order: 1; padding-left: 8px; margin: 0px; font-size: 14px; line-height: 2.2em; }
.markdown-body .custom-container.group .group-item-radio { position: fixed; right: -1e+08px; }
.markdown-body .custom-container.group .group-item-label { order: 1; cursor: pointer; font-size: 14px; line-height: 2; padding: 0px 1em; color: var(--g-color-20); }
.markdown-body .custom-container.group .group-item-label:hover { background: var(--g-color-85); }
.markdown-body .custom-container.group .group-item-content { order: 2; width: 100%; display: none; border-top-right-radius: ; border-bottom-right-radius: ; border-bottom-left-radius: ; border-top-left-radius: 0px; padding: 12px 12px 0px; background: var(--g-color-100); }
.markdown-body .custom-container.group .group-item-radio:checked + .group-item-label { background: var(--g-color-100); border-top-left-radius: var(--g-border-radius); border-top-right-radius: var(--g-border-radius); color: var(--g-color-0); font-weight: 500; }
.markdown-body .custom-container.group .group-item-radio:checked + .group-item-label + .group-item-content { display: block; }
.markdown-body { counter-reset: h2counter 0 h3counter 0 h4counter 0 h5counter 0 h6counter 0; }
.markdown-body h1.show-number { counter-reset: h2counter 0; }
.markdown-body h2.show-number { counter-reset: h3counter 0; }
.markdown-body h3.show-number { counter-reset: h4counter 0; }
.markdown-body h4.show-number { counter-reset: h5counter 0; }
.markdown-body h5.show-number { counter-reset: h6counter 0; }
.markdown-body h2.show-number::before { counter-increment: h2counter 1; content: counter(h2counter) ".  "; }
.markdown-body h3.show-number::before { counter-increment: h3counter 1; content: counter(h2counter) "." counter(h3counter) ".  "; }
.markdown-body h4.show-number::before { counter-increment: h4counter 1; content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) ".  "; }
.markdown-body h5.show-number::before { counter-increment: h5counter 1; content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) ".  "; }
.markdown-body h6.show-number::before { counter-increment: h6counter 1; content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "." counter(h6counter) ".  "; }
.markdown-body { text-size-adjust: 100%; color: rgb(36, 41, 46); font-family: "Sarasa UI regular", "Clear Sans", "Helvetica Neue", Helvetica, Arial, "Segoe UI Emoji", sans-serif; font-size: 16px; line-height: 1.5; overflow-wrap: break-word; }
.markdown-body details { display: block; }
.markdown-body summary { display: list-item; }
.markdown-body a { background-color: initial; }
.markdown-body a:active, .markdown-body a:hover { outline-width: 0px; }
.markdown-body strong { font-weight: bolder; }
.markdown-body h1 { font-size: 2em; margin: 0.67em 0px; }
.markdown-body img { border-style: none; }
.markdown-body code, .markdown-body kbd, .markdown-body pre { font-family: "JetBrains Mono semibold", "Sarasa UI Semibold"; font-size: 1em; }
.markdown-body hr { box-sizing: initial; height: 0px; overflow: visible; }
.markdown-body input { font: inherit; margin: 0px; }
.markdown-body input { overflow: visible; }
.markdown-body [type="checkbox"] { box-sizing: border-box; padding: 0px; }
.markdown-body * { box-sizing: border-box; }
.markdown-body input { font-family: inherit; font-size: inherit; line-height: inherit; }
.markdown-body a { color: rgb(3, 102, 214); text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }
.markdown-body strong { font-weight: 600; }
.markdown-body hr { height: 0px; margin: 15px 0px; overflow: hidden; background: transparent; border-width: 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-left-color: initial; border-image: initial; border-bottom-style: solid; border-bottom-color: rgb(223, 226, 229); }
.markdown-body hr::after, .markdown-body hr::before { display: table; content: ""; }
.markdown-body hr::after { clear: both; }
.markdown-body table { border-spacing: 0px; border-collapse: collapse; }
.markdown-body td, .markdown-body th { padding: 0px; }
.markdown-body details summary { cursor: pointer; }
.markdown-body kbd { display: inline-block; padding: 3px 5px; font: 11px / 10px SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; color: rgb(68, 77, 86); vertical-align: middle; background-color: rgb(250, 251, 252); border: 1px solid rgb(209, 213, 218); border-radius: 3px; box-shadow: rgb(209, 213, 218) 0px -1px 0px inset; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin-top: 0px; margin-bottom: 0px; }
.markdown-body h1 { font-size: 32px; }
.markdown-body h1, .markdown-body h2 { font-weight: 600; }
.markdown-body h2 { font-size: 24px; }
.markdown-body h3 { font-size: 20px; }
.markdown-body h3, .markdown-body h4 { font-weight: 600; }
.markdown-body h4 { font-size: 16px; }
.markdown-body h5 { font-size: 14px; }
.markdown-body h5, .markdown-body h6 { font-weight: 600; }
.markdown-body h6 { font-size: 12px; }
.markdown-body p { margin-top: 0px; margin-bottom: 10px; }
.markdown-body blockquote { margin: 0px; }
.markdown-body ol, .markdown-body ul { padding-left: 0px; margin-top: 0px; margin-bottom: 0px; }
.markdown-body ol ol, .markdown-body ul ol { list-style-type: lower-roman; }
.markdown-body ol ol ol, .markdown-body ol ul ol, .markdown-body ul ol ol, .markdown-body ul ul ol { list-style-type: lower-alpha; }
.markdown-body dd { margin-left: 0px; }
.markdown-body code, .markdown-body pre { font-family: "JetBrains Mono semibold", "Sarasa UI Semibold"; font-size: 12px; }
.markdown-body pre { margin-top: 0px; margin-bottom: 0px; }
.markdown-body input::-webkit-inner-spin-button, .markdown-body input::-webkit-outer-spin-button { margin: 0px; appearance: none; }
.markdown-body hr { border-bottom-color: rgb(238, 238, 238); }
.markdown-body::after, .markdown-body::before { display: table; content: ""; }
.markdown-body::after { clear: both; }
.markdown-body > :first-child { margin-top: 0px !important; }
.markdown-body > :last-child { margin-bottom: 0px !important; }
.markdown-body a:not([href]) { color: inherit; text-decoration: none; }
.markdown-body blockquote, .markdown-body details, .markdown-body dl, .markdown-body ol, .markdown-body p, .markdown-body pre, .markdown-body table, .markdown-body ul { margin-top: 0px; margin-bottom: 16px; }
.markdown-body hr { height: 0.25em; padding: 0px; margin: 24px 0px; background-color: rgb(225, 228, 232); border: 0px; }
.markdown-body blockquote { padding: 0px 1em; color: rgb(106, 115, 125); border-left: 0.25em solid rgb(223, 226, 229); }
.markdown-body blockquote > :first-child { margin-top: 0px; }
.markdown-body blockquote > :last-child { margin-bottom: 0px; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; }
.markdown-body h1 { font-size: 2em; }
.markdown-body h1, .markdown-body h2 { padding-bottom: 0.3em; border-bottom: 1px solid rgb(234, 236, 239); }
.markdown-body h2 { font-size: 1.5em; }
.markdown-body h3 { font-size: 1.25em; }
.markdown-body h4 { font-size: 1em; }
.markdown-body h5 { font-size: 0.875em; }
.markdown-body h6 { font-size: 0.85em; color: rgb(106, 115, 125); }
.markdown-body ol, .markdown-body ul { padding-left: 2em; }
.markdown-body ol ol, .markdown-body ol ul, .markdown-body ul ol, .markdown-body ul ul { margin-top: 0px; margin-bottom: 0px; }
.markdown-body li { }
.markdown-body li > p { margin-top: 16px; }
.markdown-body li + li { margin-top: 0.25em; }
.markdown-body dl { padding: 0px; }
.markdown-body dl dt { padding: 0px; margin-top: 16px; font-size: 1em; font-style: italic; font-weight: 600; }
.markdown-body dl dd { padding: 0px 16px; margin-bottom: 16px; }
.markdown-body table { display: block; width: 100%; overflow: auto; }
.markdown-body table th { font-weight: 600; }
.markdown-body table td, .markdown-body table th { padding: 6px 13px; border: 1px solid rgb(223, 226, 229); }
.markdown-body table tr { background-color: rgb(255, 255, 255); border-top: 1px solid rgb(198, 203, 209); }
.markdown-body table tr:nth-child(2n) { background-color: rgb(246, 248, 250); }
.markdown-body img { max-width: 100%; box-sizing: initial; background-color: rgb(255, 255, 255); }
.markdown-body img[align="right"] { padding-left: 20px; }
.markdown-body img[align="left"] { padding-right: 20px; }
.markdown-body code { padding: 0.2em 0.4em; margin: 0px; font-size: 85%; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px; }
.markdown-body pre { overflow-wrap: normal; }
.markdown-body pre > code { padding: 0px; margin: 0px; font-size: 100%; word-break: normal; white-space: pre; background: transparent; border: 0px; }
.markdown-body .highlight { margin-bottom: 16px; }
.markdown-body .highlight pre { margin-bottom: 0px; word-break: normal; }
.markdown-body .highlight pre, .markdown-body pre { padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgb(246, 248, 250); border-radius: 3px; }
.markdown-body pre code { display: inline; padding: 0px; margin: 0px; overflow: visible; line-height: inherit; overflow-wrap: normal; background-color: initial; border: 0px; }
.markdown-body .task-list-item { list-style-type: none; }
.markdown-body .task-list-item + .task-list-item { margin-top: 3px; }
.markdown-body .task-list-item input { margin: 0px 0.2em 0.25em -1.6em; vertical-align: middle; }
.markdown-body img { display: inline; }
        </style>
  </head>
  <body>
    <article class="markdown-body" powered-by="Yank Note"><h2 id="%E8%B7%B3%E8%BF%87%E6%B8%B2%E6%9F%93%E7%9A%84%E6%96%B9%E6%B3%95">跳过渲染的方法</h2><h3 id="%E6%96%B9%E6%B3%95%E4%B8%80">方法一</h3><p>找到根目录下<code class="copy-inner-text">_config.yml</code>文件, 然后记得是直接搜索<code class="copy-inner-text">skip_render</code>, 不要自己写一个新的</p><div class="custom-container warning has-title"><p class="custom-container-title">提示</p><p>我自己就是最初以为没有, 就新建了一个, 结果一直报错, 报错显示 <code class="copy-inner-text">命令duplicate</code> 但当时没意识到, 以为是这个功能在新版hexo砍了, 不过这个错误代码同样适用于别的错误, 代表相关命令重复了, 导致程序报错</p></div><p>下面是代码书写方法</p><pre><code class="language-yaml"><span class="hljs-comment" style="color: rgb(92, 99, 112); font-style: italic;"># 找到skip_render</span>
<span class="hljs-attr" style="color: rgb(209, 154, 102);">skip_render:</span> 
 <span class="hljs-bullet" style="color: rgb(97, 174, 238);">-</span> <span class="hljs-string" style="color: rgb(152, 195, 121);">HTML/*</span>
 <span class="hljs-comment" style="color: rgb(92, 99, 112); font-style: italic;"># - XXXX文件夹名字XXX/细分文件名(如果想全部不渲染就写'*'号)</span>
 <span class="hljs-comment" style="color: rgb(92, 99, 112); font-style: italic;"># *代表递归, 即重复执行跳过渲染, 直至路径下所有文件递归完</span>
</code></pre><p>完成后即不会渲染, 这样做的目的就是可以在博客中使用该路径调取文件</p><pre><code class="language-yaml"><span class="hljs-comment" style="color: rgb(92, 99, 112); font-style: italic;"># 以上面例子为例</span>
<span class="hljs-string" style="color: rgb(152, 195, 121);">/HTML/XXXX文件</span>
</code></pre><h2 id="%E6%96%B9%E6%B3%95%E4%BA%8C">方法二</h2><p>在文档头部打上</p><pre><code class="language-yaml"><span class="hljs-meta" style="color: rgb(97, 174, 238);">---</span>
<span class="hljs-attr" style="color: rgb(209, 154, 102);">layout:</span> <span class="hljs-literal" style="color: rgb(86, 182, 194);">false</span>
<span class="hljs-meta" style="color: rgb(97, 174, 238);">---
</span></code></pre><div class="custom-container tip has-title"><p class="custom-container-title">方法局限</p><p>此方法用于<code class="copy-inner-text">html</code>文档以及<code class="copy-inner-text">md</code>文档效果同上, 但别的文档不一定有效, 且如果html涉及外部css和js必须使用外链, 相对来说会麻烦很多, 推荐方法一, 我当时是方法一搞出问题了才被迫用的</p></div></article>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490

# 点我跳转到文末


# 具体操作步骤

写好的文本直接点击软件右上角导出, 具体选项如下

记住一定要选择代码高亮, 不然代码框就没有关键词高亮了

图片的两个功能看情况使用, 因为我是插入图片时就使用了图床, 所以就没勾选, 不过理想情况还是md目录旁边备份一个图源, 要不然万一图床挂了GitHub访问不了也麻烦

重点

包含样式和内联样式分别代表不同的html生成模式, 根据作者的描述以及亲测

包含样式: 对于各类样式的格式支持更好, 但字数统计会抽风, 且html代码需要处理下才可正常显示, 处理方法看下方

内联样式: 不需要修改样式即可使用, 但目前版本部分组件兼容性不行别入可切换的group栏, 还得看后面优化, 不过字数统计正常 两者都hexo都可以识别多级标题并生成目录


# 包含样式代码修改

警告

使用包含样式的朋友看这里

包含样式如果不在乎统计字数更推荐使用, 不过原代码直接使用可能会有bug, 请找到代码的这一行并把这个空行删掉

.markdown-body .task-list-item input { margin: 0px 0.2em 0.25em -1.6em; vertical-align: middle; }
.markdown-body img { display: inline; }
<!-- 这一行        -->
        </style>
  </head>
  <body>
    <article class="markdown-body" powered-by="Yank Note"><p>下面就来分享一下我这段时间研究的各种插入 html 的奇葩方法</p><div class="custom-container danger has-title"><p
1
2
3
4
5
6
7
1
2
3
4
5
6
7

提示

变成这样

这样文章就可以正常渲染了

# 最后步骤

直接把生成的html代码用vscode打开, 并复制代码粘贴至md文件中, 执行hexo渲染便可直接浏览啦



# 结语

这一通操作下来就可以形成全新的工作流, 即在一个文件夹里编辑所有的博客原稿, 在编辑完后生成html文件发布到自己的网站, 即可保证文章风格不需要额外调整, 也保证了自己的原稿可以保存在本地, 防止网站不弄了可独立的代码表达样式却无法在别处渲染

当然最硬核的还是自己开发一个和主题和匹配的编辑器, 直接做到本地般和网页版原生样式同步

欢迎在评论区发表自己的想法

在线编辑 (opens new window)
#Hexo博客相关(win)#静态博客知识分享
最近编辑时间: 2024/01/27 20:20:23
常见报错及解法
文件跳过Hexo渲染的方法

← 文件跳过Hexo渲染的方法→

最近更新
01
Speaking Corpus
04-28
02
Speaking Reference
04-24
03
Writing Reference
04-24
更多文章>
Theme by Vdoing | Copyright © 2021-2024 | 备案信息:10086号