在Ghost博客中添加Python代码片段的方法指南

405 阅读2分钟

在这篇短文中,我们将看到如何在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>

如下图所示:

How to add Python code snippets in Ghost Blog

第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>