master

分支 (1)

管理

管理

master

docsThemes
/
index.html

<!doctype html>
<html>

<head>
	<meta charset='UTF-8'>
	<meta name='viewport' content='width=device-width initial-scale=1'>
	<title>网页样式引入说明文档</title>
	<link rel="stylesheet" href="https://a-cai.gitee.io/docsthemes/html-style/yige.css">
	<script src="https://a-cai.gitee.io/docsthemes/highlightjs/highlight.min.js"></script>
	<link rel="stylesheet" href="https://a-cai.gitee.io/docsthemes/highlight-style/atom-one-dark.css">
	<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
	<script src="https://a-cai.gitee.io/docsthemes/autoSpacing/pangu.min.js"></script>
	<script>
		hljs.initHighlightingOnLoad();
    document.addEventListener('DOMContentLoaded', () => {
      pangu.autoSpacingPage();
    });
	</script>
</head>

<body>
	<h1>一、引用</h1>
	<blockquote>
		<p>仓库地址：
			<a href='https://gitee.com/A-cai/docsThemes' target='_blank' class='url'>https://gitee.com/A-cai/docsThemes</a>
		</p>
		<p>项目主页：
			<a href='https://a-cai.gitee.io/docsthemes/' target='_blank' class='url'>https://a-cai.gitee.io/docsthemes/</a>
		</p>
	</blockquote>
	<p>直接在 header 中引入：</p>
	<pre><code class='language-html' lang='html'>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://a-cai.gitee.io/docsthemes/html-style/yige.css&quot;&gt;
&lt;script src=&quot;https://a-cai.gitee.io/docsthemes/highlightjs/highlight.min.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://a-cai.gitee.io/docsthemes/highlight-style/atom-one-dark.css&quot;&gt;
&lt;script id=&quot;MathJax-script&quot; async src=&quot;https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://a-cai.gitee.io/docsthemes/autoSpacing/pangu.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
  hljs.initHighlightingOnLoad();
	document.addEventListener(&#39;DOMContentLoaded&#39;, () =&gt; {
    pangu.autoSpacingPage();
  });
&lt;/script&gt;
</code></pre>
	<p>README：
		<a href='https://a-cai.gitee.io/docsthemes/README.md' target='_blank' class='url'>https://a-cai.gitee.io/docsthemes/README.md</a>
	</p>
	<h1>二、目录结构 Oct - Tree</h1>
	<pre><code class='language-shell' lang='shell'>- .git
- autoSpacing
- fonts
- highlightjs
- highlight-style
- html-style (markdown.css、yige.css)
- markdown-style
- MathJax
- index.html
- RRADME.md
</code></pre>
	<h1>三、详细说明</h1>
	<p>（一）主题一 适用于文艺风：</p>
	<pre><code class='language-html' lang='html'>&lt;!-- 渲染HTML结构的文件 --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://a-cai.gitee.io/docsthemes/html-style/markdown.css&quot;&gt;
</code></pre>
	<p>（二）主题二 适用于说明文档</p>
	<pre><code class='language-html' lang='html'>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://a-cai.gitee.io/docsthemes/html-style/yige.css&quot;&gt;
</code></pre>
	<p>渲染代码块，让代码高亮：</p>
	<pre><code class='language-html' lang='html'>&lt;!-- 引入执行代码高亮的js文件 --&gt;
&lt;script src=&quot;https://a-cai.gitee.io/docsthemes/highlightjs/highlight.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- 引入高亮代码默认css样式 --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://a-cai.gitee.io/docsthemes/highlightjs/default.min.css&quot;&gt;
&lt;!-- swift代码文件 --&gt;
&lt;script src=&quot;https://a-cai.gitee.io/docsthemes/highlightjs/swift.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- 打开入口函数，执行代码高亮 --&gt;
&lt;script&gt;hljs.initHighlightingOnLoad();&lt;/script&gt;
</code></pre>
	<p>如果不喜欢高亮代码的样式，可以引用第三方的css：</p>
	<pre><code class='language-html' lang='html'>&lt;!-- 引入喜欢的高亮代码默认css样式 --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://a-cai.gitee.io/docsthemes/highlight-style/你喜欢的高亮代码名.css&quot;&gt;
</code></pre>
	<p>可能需要引入的 Mathjax 函数来使HTML支持数学公式（目前markdown导出HTML时仍为p标签，应该是个bug）：</p>
	<pre><code class='language-html' lang='html'>&lt;!-- 数学公式：引入方式 1 --&gt;
  &lt;script type=&quot;text/x-mathjax-config&quot;&gt;
    MathJax.Hub.Config({tex2jax: {inlineMath: [[&#39;$&#39;,&#39;$&#39;], [&#39;\\(&#39;,&#39;\\)&#39;]]}});
  &lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&quot;&gt; &lt;/script&gt;

  &lt;!-- 数学公式：引入方式 2--&gt;
&lt;script id=&quot;MathJax-script&quot; async src=&quot;https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js&quot;&gt;&lt;/script&gt;
</code></pre>
	<h3>添加指示器元素：</h3>
	<p>指示器 css 代码：</p>
	<pre><code class='language-css' lang='css'>/* 指示器元素 */
.indicator {
    position: absolute;
    top: 0; right: 0; left: 0; bottom: 0;
    background: linear-gradient(to right top, teal 50%, transparent 50%) no-repeat;
    background-size: 100% calc(100% - 100vh);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: darken;
}
.indicator::after {
    content: &#39;&#39;;
    position: fixed;
    top: 5px; bottom: 0; right: 0; left: 0;
    background: #fff;
    z-index: 1;
}
</code></pre>
	<p>指示器 html 代码：</p>
	<pre><code class='language-html' lang='html'>&lt;!-- 在&lt;body&gt;标签内插入指示器元素 --&gt;
&lt;div class=&quot;indicator&quot;&gt;&lt;/div&gt;
</code></pre>
	<p>推荐好看的code.css</p>
	<pre><code class='language-css' lang='css'>- color-brewer.css
- tomorrow.css
</code></pre>
	<p>完整引入（有注释）：</p>
	<pre><code class='language-html' lang='html'>&lt;!-- css --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://a-cai.gitee.io/docsthemes/html-style/yige.css&quot;&gt;
&lt;script src=&quot;https://a-cai.gitee.io/docsthemes/highlightjs/highlight.min.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://a-cai.gitee.io/docsthemes/highlight-style/atom-one-dark.css&quot;&gt;
&lt;!--js --&gt;
&lt;script&gt;hljs.initHighlightingOnLoad();&lt;/script&gt;
&lt;script id=&quot;MathJax-script&quot; async src=&quot;https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://a-cai.gitee.io/docsthemes/autoSpacing/pangu.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
	document.addEventListener(&#39;DOMContentLoaded&#39;, () =&gt; {
    // listen to any DOM change and automatically perform spacing via MutationObserver()
    pangu.autoSpacingPage();
  });
&lt;/script&gt;
</code></pre>
	<p>&nbsp;</p>
</body>

</html>