1.9 代码高亮好了

This commit is contained in:
跨越晨昏 2024-10-14 19:22:02 +08:00
parent a018c9edd8
commit 922db49b9f
4 changed files with 49 additions and 29 deletions

View File

@ -1,4 +1,6 @@
from markdown.extensions import Extension, extra, admonition, meta, sane_lists, toc, wikilinks
from markdown.extensions import Extension, extra, admonition, meta, sane_lists, toc, wikilinks, codehilite
from pygments.formatters import HtmlFormatter
from markdown.treeprocessors import Treeprocessor
from markdown.inlinepatterns import Pattern as Pattern_
@ -11,15 +13,6 @@ import re
import xml
import emoji
Extensions = {
"Extra": extra.ExtraExtension(fenced_code={'lang_prefix': ''}), # 基本扩展
"Admonition": admonition.AdmonitionExtension(), # 警告扩展
"Meta-Data": meta.MetaExtension(), # 元数据
"Sane Lists": sane_lists.SaneListExtension(), # 只能列表
"Table of Contents": toc.TocExtension(), # 目录
"WikiLinks": wikilinks.WikiLinkExtension(), # 内部链接
}
try: # 检测当前平台是否支持扩展语法
from .Extra import *
@ -28,6 +21,30 @@ except ModuleNotFoundError: # 不支持扩展语法
EXTRA_ABLE = False
class HighlightHtmlFormatter(HtmlFormatter):
def __init__(self, lang_str='', **options):
super().__init__(**options)
# lang_str has the value {lang_prefix}{lang}
# specified by the CodeHilite's options
self.lang_str = lang_str.split('-')[-1]
def _wrap_code(self, source):
yield 0, f'<code class="{self.lang_str}">'
yield from source
yield 0, '</code>'
Extensions = {
'基本扩展': extra.ExtraExtension(fenced_code={'lang_prefix': ''}),
'警告扩展': admonition.AdmonitionExtension(),
'元数据': meta.MetaExtension(),
'能列表': sane_lists.SaneListExtension(),
'目录': toc.TocExtension(),
'内部链接': wikilinks.WikiLinkExtension(),
'代码高亮': codehilite.CodeHiliteExtension(guess_lang=False, pygments_formatter=HighlightHtmlFormatter),
}
class Simple(InlineProcessor):
"""
可通过简单的正则表达式和HTML标签实现的样式

View File

@ -28,9 +28,11 @@ HEAD = (
'</script>',
# Highlight.js
'<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">',
'<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>',
'<script>hljs.highlightAll();</script>',
# '<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">',
# '<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>',
# '<script>hljs.highlightAll();</script>',
'<link rel="stylesheet" href="../Static/styles.css">',
'<style>',
' .block {',

View File

@ -12,9 +12,7 @@
<script>
mermaid.initialize({startOnLoad:true});
</script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<link rel="stylesheet" href="../Static/styles.css">
<style>
.block {
background-color: grey; /* 灰色背景 */
@ -187,25 +185,28 @@
<p><span class="block">强调值</span></p>
<h2 id="4.2">4.2 多行</h2>
<h3 id="4.2.1">4.2.1 YAML</h3>
<pre><code class="yaml">A:
1. a
2. b
3. c
B:
- a
- b
- c
</code></pre>
<div class="codehilite"><pre><span></span><code class="yaml"><span class="nt">A</span><span class="p">:</span>
<span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">1. a</span>
<span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">2. b</span>
<span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">3. c</span>
<span class="nt">B</span><span class="p">:</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">a</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">b</span>
<span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">c</span>
</code></pre></div>
<h3 id="4.2.2">4.2.2 Python</h3>
<pre><code class="python">print('CrossDown')
</code></pre>
<div class="codehilite"><pre><span></span><code class="python"><span class="nb">print</span><span class="p">(</span><span class="s1">&#39;CrossDown&#39;</span><span class="p">)</span>
</code></pre></div>
<h3 id="4.2.3">4.2.3 Mermaid</h3>
<pre><code class="mermaid">graph TD
<div class="codehilite"><pre><span></span><code class="mermaid">graph TD
A[开始]--&gt;B[流程]
B--&gt;C{判断}
C--&gt;|结果1|D[结束1]
C--&gt;|结果2|E[结束2]
</code></pre>
</code></pre></div>
<h1 id="5">5 转义</h1>
<p>\ </p>
<p>\a </p>