在这篇短文中,我们将看到如何在Ghost Blog中用Prism.js为Python添加代码高亮。Python并不包括在《Ghost》中描述的默认安装中。Ghost中代码样本的完整指南。
让我们为Python和Ghost博客创建简单的代码片段:
```python
print('test')
复制并粘贴上述内容到你的markdown文章中。
第1步:在Ghost博客中添加Prism.js
对于代码高亮,我们将使用一个轻量级的语法高亮器,叫做。Prism.js。它是高度可定制的,使用起来非常简单。
它可以从上面的页面下载或通过CDN链接添加。
在这篇文章中,我们将添加CDN链接。最新的CDN版本可以从这个页面获得。Prism.js主题、组件和插件。
获得像下面这样的最新链接:
<!-- place it in site header -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" />
<!-- place it in site footer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
接下来打开Code Injection或者导航到它 -/ghost/#/settings/code-injection :
- 打开幽灵博客设置
- 对于Ghost 4 - 左下角的齿轮
- Ghost 3和更早的版本 -代码注入
- 在网站标题中添加:
<!-- place it in site header -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" />
- 在网站页脚中添加:
<!-- place it in site header -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
如下图所示:

第2步:在Prism.js中添加Python高亮显示
在这一步,我们将在Ghost博客中添加Python高亮。这可以通过在网站页脚添加下一行来完成,如上图所示。
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-python.min.js"></script>
现在Python代码片段应该被高亮显示。
第3步:为Prism.js代码块添加复制选项
在这一步中,我们将为你的代码片段添加新的功能,如--复制按钮。
我们将使用一个名为:prism-copy-to-clipboard 的插件。这个插件需要额外的插件,如。prism-toolbar
我们将再次使用代码注入,并在页脚和页眉处添加几行,头部的那一行:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/toolbar/prism-toolbar.min.css" />
和页脚的行:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
第四步:改变Prism.js主题
最后让我们看看如何改变Prism.js的主题,以配合我们的Ghost主题。
你可以通过在网站头部添加下一行来实现:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-solarizedlight.min.css"/>
更多的Prism.js主题可以在下面找到:
第5步:完整的代码
网站标题:
<!-- Prism.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/toolbar/prism-toolbar.min.css" />
<!-- themes: https://cdnjs.com/libraries/prism -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-solarizedlight.min.css"/>
网站页脚:
<!-- Prism.js -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<!-- langs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-julia.min.js"></script>