Emacs Org-mode 导出成 HTML 时如何在 <pre> 中添加 <code>

1 问题

一般在 HTML 中排版插入代码习惯用 <pre><code>...</code></pre> 这样的嵌套格式,多数 CSS 也是针对这样的结构编写的。

但是用 Org-mode 导出 HTML 时没有嵌套 <code> 标签,导致 CSS 的 code{...} 样式不生效,提供两个解决办法。

2 解决

2.1 修改 CSS

若在 Org-mode 中插入 SRC 时输入了语言名称,那么导出成 HTML 的时候会给 <pre> 添加一个 src 的 class,见下面例子:

#+BEGIN_SRC
...
#+END_SRC
; 会导出为 <pre>...</pre>。
#+BEGIN_SRC python
...
#+END_SRC
; 会导出为 <pre class="src src-python">...</pre>。

所以可以为主题添加 pre.src 的 CSS 来解决排版问题。上面的 pre 块是无样式的,下面的是加了样式的。

pre.src{
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
overflow: auto;
padding: 10px;
text-indent: 0;
border-left: 10px solid;
background-color: #F7F7F7;
border-color: rgba(30,200,187,0.1);
}

2.2 直接修改源文件

如果一定要加 <code>,在 Emacs 安装目录/emacs/share/emacs/版本/lisp/org/ox-html.elorg-html-src-block() 函数中,编辑最后一行:

; 将
; (format "\n<pre class=\"src src-%s\"%s>%s</pre>" lang label code))))))
; 改成
(format "\n<pre class=\"src src-%s\"%s><code>%s</code></pre>" lang label code))))))

; 当使用 #+BEGIN_SRC python 插入代码时,
; 会导出成 <pre class="src src-python"><code>...</code></pre>。

不过不应该直接修改源文件,贴这个方法只是因为我不知道怎么重载 Emacs Lisp 的函数。


Org-mode 导出 HTML 时如何在 <pre> 中添加 <code>、code 标签的 CSS 样式。

版权声明:本站所有原创文章,作者保留版权。转载必须包含本声明,不得修改任何内容(包括文章标题),并以超链接的形式注明作者“Bary”和本文原始地址。

发表评论

电子邮件地址不会被公开。 必填项已用*标注