diff options
| author |   We-unite <3205135446@qq.com> | 2025-01-07 12:36:05 +0800 |
|---|---|---|
| committer | We-unite <3205135446@qq.com> | 2025-01-07 12:36:05 +0800 |
| commit | 4d88ef666eee1b6f191f6e85b00acf8d5a2d1899 (patch) | |
| tree | 68391846bae84f9546b0d089c012afc336a6e6bd /md2html.sh | |
| parent | 11e64c5804b696f170b9d5d881befbabc4a4e85c (diff) | |
| download | myweb-new_highlightjs.tar.gz myweb-new_highlightjs.zip | |
highlight don't use auto-detect but given languagenew_highlightjs
In this commit, lot's of things is changed. Hope they all runs
currectly.
Now highlight.js is supporting more and more proguam languages, but
the auto detection always go wrong, even for common languages like c,
bash, python, makefile.
Use Given Language
------------------
As you know, I always write markdown and convert to html by pandoc. In
the old, "```cpp" in markdown will be deleted first to keep the embeded
code clean and not highlighted, then I can use highlight.js. But this
causes that html document doesn't know the language.
This time, md2html.sh is changed: pandoc use "--no-highlight"
argument to keep code clean, and it will output like this:
```html
<pre class="cpp"><code>...</code></pre>
```
Although there may be other tags between `<code></code>`, it's clear
that `<pre class="xxx"><code>` is nested tightly, except some space
characters or \n.
Then, sed deal with the whole doc(not line by line), replace `<pre
class="xxx"><code>` with `<pre><code class="language-xxx">`. That's it!
Math Formula
------------
Math formular is also a problem during convertion by pandoc. In the old
it's dealed menually. Now pandoc use "--mathjax=none", then formula is
no longer showed by pandoc, but only `<span class="math xxx">\( formula \)</span>`.
And the math tool I used will deal with it.
Mermaid picture
----------------
pandoc doesn't support convert mermaid in markdown to html picture.
Let's have a warning!
Diffstat (limited to 'md2html.sh')
| -rwxr-xr-x | md2html.sh | 47 |
1 files changed, 38 insertions, 9 deletions
| @@ -8,21 +8,50 @@ | |||
| 8 | # Created Time : 2023-12-15 | 8 | # Created Time : 2023-12-15 |
| 9 | ########################################################################## | 9 | ########################################################################## |
| 10 | 10 | ||
| 11 | # origin是输入的第一个参数，指源文件名 | 11 | origin=$1 # 源文件名 |
| 12 | # src是原文件名前边加一个.，是源文件的复制 | 12 | src="."$origin # 源文件的复制 |
| 13 | # dst是原文件名的md后缀改成html | 13 | dst=${origin%.*}".html" # 目标文件 |
| 14 | origin=$1 | 14 | |
| 15 | src="."$origin | 15 | if [ $# -ne 2 ] || [ ${origin##*.} != "md" ]; then |
| 16 | dst=${origin%.*}".html" | 16 | echo "Usage: $0 <markdown file> <html title>" |
| 17 | exit 1 | ||
| 18 | elif [ ! -f $origin ]; then | ||
| 19 | echo "Error: $1 does not exist" | ||
| 20 | exit 1 | ||
| 21 | fi | ||
| 17 | 22 | ||
| 18 | cp $origin $src | 23 | cp $origin $src |
| 19 | # src中所有的“```...”替换成“```”，其中...指换行前的所有内容 | 24 | pandoc --no-highlight --mathjax=none -s $src -o $dst --metadata title="$2" |
| 20 | sed -i 's/```.*$/```/g' $src | ||
| 21 | pandoc -s $src -o $dst | ||
| 22 | rm $src | 25 | rm $src |
| 23 | 26 | ||
| 27 | # 处理多行代码块，将<pre class="xxx"><code>替换为<pre class="language-xxx"> | ||
| 28 | sed -i -E ':a;N;$!ba;s|<pre[^>]*class="([^"]+)"[^>]*>[[:space:]]*<code[^>]*>|<pre><code class="language-\1">|g' $dst | ||
| 24 | sed -i '/<style/,/<\/style>/d' $dst | 29 | sed -i '/<style/,/<\/style>/d' $dst |
| 30 | # 修改body的样式 | ||
| 25 | sed -i 's/<body>/<body>\n<div class="pandoc">\n<div class="main">/' $dst | 31 | sed -i 's/<body>/<body>\n<div class="pandoc">\n<div class="main">/' $dst |
| 32 | # 添加评论区 | ||
| 26 | sed -i 's/<\/body>/<script src="https:\/\/www.qin-juan-ge-zhu.top\/common\/js\/comment.js"><\/script>\n<\/div>\n<\/div>\n<\/body>/' $dst | 33 | sed -i 's/<\/body>/<script src="https:\/\/www.qin-juan-ge-zhu.top\/common\/js\/comment.js"><\/script>\n<\/div>\n<\/div>\n<\/body>/' $dst |
| 27 | sed -i 's/\t/ /g' $dst | 34 | sed -i 's/\t/ /g' $dst |
| 35 | # 添加样式 | ||
| 28 | sed -i 's/<\/head>/<link rel="stylesheet" href="https:\/\/www.qin-juan-ge-zhu.top\/common\/CSS\/pandoc.css">\n<script type="text\/javascript" src="https:\/\/www.qin-juan-ge-zhu.top\/common\/script4code.js"><\/script><\/head>/' $dst | 36 | sed -i 's/<\/head>/<link rel="stylesheet" href="https:\/\/www.qin-juan-ge-zhu.top\/common\/CSS\/pandoc.css">\n<script type="text\/javascript" src="https:\/\/www.qin-juan-ge-zhu.top\/common\/script4code.js"><\/script><\/head>/' $dst |
| 37 | |||
| 38 | # 检查是否有数学公式，有则添加mathjax | ||
| 39 | if grep -Eq "math inline|math display" $dst; then | ||
| 40 | sed -i 's|</head>|<script type="text/javascript" async\ | ||
| 41 | src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>\ | ||
| 42 | <script type="text/x-mathjax-config">\ | ||
| 43 | MathJax.Hub.Config({\ | ||
| 44 | tex2jax: {\ | ||
| 45 | inlineMath: [["$","$"], ["\\\\(","\\\\)"]],\ | ||
| 46 | processEscapes: true\ | ||
| 47 | }\ | ||
| 48 | });\ | ||
| 49 | </script>\ | ||
| 50 | </head>|' "$dst" | ||
| 51 | fi | ||
| 52 | |||
| 53 | # 检查是否有mermaid有则告警 | ||
| 54 | grep -n "language-mermaid" $dst | ||
| 55 | if [ $? -eq 0 ]; then | ||
| 56 | echo "Convertion Warning: mermaid is included, may you need to replace it with a picture???" | ||
| 57 | fi | ||