8.9 修改代码高亮样式

public/post/3/index.html

@@ -96,32 +96,32 @@ https://github.com/Xcnte/Code-Prettify-for-typecho</a></strong></p>
 <p>
 <img data-lazy-src="/pics/2021/09/1393453259.png" alt="" class="lazyload"></p>
 <p>在主题的自定义css下面加入以下代码</p>
-<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>#post-content <span style="color:#f92672">pre</span> <span style="color:#f92672">code</span> {
-</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">display</span>:<span style="color:#66d9ef">block</span>;
-</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">overflow-x</span>:<span style="color:#66d9ef">auto</span>;
-</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">position</span>:<span style="color:#66d9ef">relative</span>;
-</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">margin</span>:<span style="color:#ae81ff">0</span>;
-</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">padding-left</span>:<span style="color:#ae81ff">50</span><span style="color:#66d9ef">px</span>;
-</span></span><span style="display:flex;"><span>}
-</span></span><span style="display:flex;"><span><span style="color:#f92672">pre</span> <span style="color:#f92672">code</span> {
-</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">position</span>:<span style="color:#66d9ef">relative</span>;
-</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">display</span>:<span style="color:#66d9ef">block</span>;
-</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">overflow-x</span>:<span style="color:#66d9ef">auto</span>;
-</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">margin</span>:<span style="color:#ae81ff">4.4</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">0</span><span style="color:#f92672">.</span>px <span style="color:#ae81ff">.4</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">1</span><span style="color:#66d9ef">px</span>;
-</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">padding</span>:<span style="color:#ae81ff">0</span>;
-</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">max-height</span>:<span style="color:#ae81ff">500</span><span style="color:#66d9ef">px</span>;
-</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">padding-left</span>:<span style="color:#ae81ff">3.5</span><span style="color:#66d9ef">em</span>
-</span></span><span style="display:flex;"><span>}
+<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">#</span><span style="color:#000">post-content</span> <span style="color:#204a87;font-weight:bold">pre</span> <span style="color:#204a87;font-weight:bold">code</span> <span style="color:#000;font-weight:bold">{</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span><span style="color:#204a87;font-weight:bold">block</span><span style="color:#000;font-weight:bold">;</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#204a87;font-weight:bold">overflow-x</span><span style="color:#000;font-weight:bold">:</span><span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span><span style="color:#204a87;font-weight:bold">relative</span><span style="color:#000;font-weight:bold">;</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#204a87;font-weight:bold">padding-left</span><span style="color:#000;font-weight:bold">:</span><span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
+</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
+</span></span><span style="display:flex;"><span><span style="color:#204a87;font-weight:bold">pre</span> <span style="color:#204a87;font-weight:bold">code</span> <span style="color:#000;font-weight:bold">{</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span><span style="color:#204a87;font-weight:bold">relative</span><span style="color:#000;font-weight:bold">;</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span><span style="color:#204a87;font-weight:bold">block</span><span style="color:#000;font-weight:bold">;</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#204a87;font-weight:bold">overflow-x</span><span style="color:#000;font-weight:bold">:</span><span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span><span style="color:#0000cf;font-weight:bold">4.4</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#ce5c00;font-weight:bold">.</span><span style="color:#000">px</span> <span style="color:#0000cf;font-weight:bold">.4</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">1</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#204a87;font-weight:bold">padding</span><span style="color:#000;font-weight:bold">:</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#204a87;font-weight:bold">max-height</span><span style="color:#000;font-weight:bold">:</span><span style="color:#0000cf;font-weight:bold">500</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
+</span></span><span style="display:flex;"><span>    <span style="color:#204a87;font-weight:bold">padding-left</span><span style="color:#000;font-weight:bold">:</span><span style="color:#0000cf;font-weight:bold">3.5</span><span style="color:#204a87;font-weight:bold">em</span>
+</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
 </span></span></code></pre></div><p>在Twitter主题找到pjax开始执行的js代码</p>
 <p>
 <img data-lazy-src="/pics/2021/09/1861920591.png" alt="" class="lazyload"></p>
 <p>在主题的这个地方加入下面的代码在主题的相应位置</p>
-<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">if</span> (<span style="color:#66d9ef">typeof</span> <span style="color:#a6e22e">Prism</span> <span style="color:#f92672">!==</span> <span style="color:#e6db74">&#39;undefined&#39;</span>) {
-</span></span><span style="display:flex;"><span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">pres</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">getElementsByTagName</span>(<span style="color:#e6db74">&#39;pre&#39;</span>);
-</span></span><span style="display:flex;"><span>                <span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">var</span> <span style="color:#a6e22e">i</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">i</span> <span style="color:#f92672">&lt;</span> <span style="color:#a6e22e">pres</span>.<span style="color:#a6e22e">length</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672">++</span>){
-</span></span><span style="display:flex;"><span>                    <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">pres</span>[<span style="color:#a6e22e">i</span>].<span style="color:#a6e22e">getElementsByTagName</span>(<span style="color:#e6db74">&#39;code&#39;</span>).<span style="color:#a6e22e">length</span> <span style="color:#f92672">&gt;</span> <span style="color:#ae81ff">0</span>)
-</span></span><span style="display:flex;"><span>                        <span style="color:#a6e22e">pres</span>[<span style="color:#a6e22e">i</span>].<span style="color:#a6e22e">className</span>  <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;line-numbers&#39;</span>;}
-</span></span><span style="display:flex;"><span><span style="color:#a6e22e">Prism</span>.<span style="color:#a6e22e">highlightAll</span>(<span style="color:#66d9ef">true</span>,<span style="color:#66d9ef">null</span>);}
+<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">typeof</span> <span style="color:#000">Prism</span> <span style="color:#ce5c00;font-weight:bold">!==</span> <span style="color:#4e9a06">&#39;undefined&#39;</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
+</span></span><span style="display:flex;"><span><span style="color:#204a87;font-weight:bold">var</span> <span style="color:#000">pres</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">getElementsByTagName</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#39;pre&#39;</span><span style="color:#000;font-weight:bold">);</span>
+</span></span><span style="display:flex;"><span>                <span style="color:#204a87;font-weight:bold">for</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">var</span> <span style="color:#000">i</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span> <span style="color:#000">i</span> <span style="color:#ce5c00;font-weight:bold">&lt;</span> <span style="color:#000">pres</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">length</span><span style="color:#000;font-weight:bold">;</span> <span style="color:#000">i</span><span style="color:#ce5c00;font-weight:bold">++</span><span style="color:#000;font-weight:bold">){</span>
+</span></span><span style="display:flex;"><span>                    <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#000">pres</span><span style="color:#000;font-weight:bold">[</span><span style="color:#000">i</span><span style="color:#000;font-weight:bold">].</span><span style="color:#000">getElementsByTagName</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">&#39;code&#39;</span><span style="color:#000;font-weight:bold">).</span><span style="color:#000">length</span> <span style="color:#ce5c00;font-weight:bold">&gt;</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">)</span>
+</span></span><span style="display:flex;"><span>                        <span style="color:#000">pres</span><span style="color:#000;font-weight:bold">[</span><span style="color:#000">i</span><span style="color:#000;font-weight:bold">].</span><span style="color:#000">className</span>  <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">&#39;line-numbers&#39;</span><span style="color:#000;font-weight:bold">;}</span>
+</span></span><span style="display:flex;"><span><span style="color:#000">Prism</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">highlightAll</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">true</span><span style="color:#000;font-weight:bold">,</span><span style="color:#204a87;font-weight:bold">null</span><span style="color:#000;font-weight:bold">);}</span>
 </span></span></code></pre></div><p>每次我们要写文章的时候我们只用按照下面那种格式就可以啦</p>
 <p>
 <img data-lazy-src="/pics/2021/09/1981017062.png" alt="" class="lazyload"></p>