带有 Python 语法高亮的 HTML 演示幻灯片

Posted 2023-02-24

【中文标题】带有 Python 语法高亮的 HTML 演示幻灯片

【英文标题】：HTML presentation slides with Python syntax highlighting

【发布时间】：2010-11-12 10:54:13

【问题描述】：

我想为我的演示文稿制作幻灯片。我的演示文稿将包含以下内容：幻灯片标题、项目符号、代码 sn-ps（采用等宽字体）、一些代码行以粗体突出显示、Python 代码 sn-ps（语法突出显示）。

我需要一个可以在 html（或 HTML5）中生成此类幻灯片的应用程序或工具，因此当我在 Web 浏览器中打开生成的 HTML 并将 Web 浏览器设置为全屏模式时，它将启动幻灯片放映。我更喜欢将我的演示文稿编写为带有一些标记的 .txt 文件，然后该工具应该生成 HTML。

我知道 Google Docs 的演示功能，但它不支持 Python 语法高亮显示。

我也知道LaTeX and Beamer，但这会生成 PDF 而不是 HTML（不是一个大问题），并且没有内置 Python 语法高亮显示。

我更喜欢使用普通的 Google Chrome 或 Mozilla Firefox 投影我的演示文稿。我不想在投影机上安装任何演示软件（如bruce）。

还有其他选择吗？

【参考方案1】：

尝试以下方法之一：

使用 S5 重构文本

http://meyerweb.com/eric/tools/s5/

http://docutils.sourceforge.net/docs/user/slide-shows.html

如果您安装docutils（首选快照），您将在工具文件夹中获得 rst2s5.py。

布鲁斯，演示工具

http://code.google.com/p/bruce-tpt/

Pandoc：通用文档转换器

http://johnmacfarlane.net/pandoc/

AsciiDoc 有一个选项可以生成自包含的Slidy HTML

【讨论】：

感谢您整理这份长长的清单。请注意，并非您提到的每个软件都支持 Python 源代码的语法高亮（或者，至少，它并不容易找到）。

@pts：由于您只能在幻灯片上显示几行代码，因此语法突出显示实际上并没有那么有用。你真的尝试过其中一种吗？

【参考方案2】：

最近slippy 出现了：将您的演示文稿编辑为 HTML，突出显示 Python（和许多其他语言）。

【参考方案3】：

你一定要看看landslide，这是一个python应用程序，它允许从markdown格式的文本创建非常漂亮的HTML5幻灯片，它支持语法突出显示。要预览它的功能，只需查看从项目的README 生成的sample slideshow。

【参考方案4】：

html5slides 是不错的选择。

http://code.google.com/p/html5slides/

【参考方案5】：

这只是您所要求的一部分，但是如果您想对 Python 进行语法高亮并转换为 HTML，那么您可以在 Emacs 中使用 python-mode 来进行语法高亮和 @987654321 @ 转换为 HTML。

例如，您可以从

开始

def decode_safely(s, charset='ascii'):
    """Return s decoded according to charset, but do so safely."""
    try:
        return s.decode(charset or 'ascii', 'replace')
    except LookupError: # bogus charset
        return s.decode('ascii', 'replace')

在通过htmlize 之后你会得到：

<pre><span class="keyword">def</span> <span class="function-name">decode_safely</span>(s, charset=<span class="string">'ascii'</span>):
    <span class="string">"""Return s decoded according to charset, but do so safely."""</span>
    <span class="keyword">try</span>:
        <span class="keyword">return</span> s.decode(charset <span class="keyword">or</span> <span class="string">'ascii'</span>, <span class="string">'replace'</span>)
    <span class="keyword">except</span> <span class="type">LookupError</span>: <span class="comment"># see job002442
</span>        <span class="keyword">return</span> s.decode(<span class="string">'ascii'</span>, <span class="string">'replace'</span>)
</pre>

您可以看到每条语法都标有一个<span>，该<span> 属于一个类，指示它属于哪个语法类：然后您可以使用CSS 来指定您想要的颜色。 （htmlize 可以配置为指定显式颜色 - <span style="color:#b22222"> - 但类/CSS 方法更灵活。）

这可以作为幻灯片生成过程的一部分轻松自动化，但我认为这对于一个答案来说已经足够了。

【讨论】：

感谢您提供此信息。我知道其他可以使用<span> 生成语法高亮的工具（例如 pygments）。如有必要，我可以自动化整个过程。但我没有时间。