我知道编辑这个网站吗？

源代码

本页描述了在页面中嵌入源代码的好方法。

内联代码片段

如果您只想编写一小段代码作为句子的一部分， 将代码用反引号括起来 (`)。

代码

Type `print('Hello world!')` and save as `hello.py`.

结果

Type print('Hello world!') and save as hello.py.

Code fences

A “code fence” is three backtick symbols (```) preceding your code, and another three concluding it. Optionally, you can write the name of the language in small case next to the leading fence to declare syntax highlighting is desired with the stated language.

Java example

代码

```java
Image3DUniverse univ = new Image3DUniverse();
univ.show();
univ.addMesh(yourImagePlus, null, "somename", 50,
  new boolean[] {true, true, true}, 2);
```

结果

Image3DUniverse univ = new Image3DUniverse();
univ.show();
univ.addMesh(yourImagePlus, null, "somename", 50,
  new boolean[] {true, true, true}, 2);

Python 示例

代码

```python
def update_progress(progress):
    barLength = 10 # length of progress bar
    block = int(round(barLength*progress))
    text = f'\rPercent complete: ' +
      f'[{"#"*block + "-"*(barLength-block)}] ' +
      f'{progress*100}%'
    sys.stdout.write(text)
    sys.stdout.flush()
```

结果

def update_progress(progress):
    barLength = 10 # length of progress bar
    block = int(round(barLength*progress))
    text = f'\rPercent complete: ' +
      f'[{"#"*block + "-"*(barLength-block)}] ' +
      f'{progress*100}%'
    sys.stdout.write(text)
    sys.stdout.flush()

Highlight directive

Alternately, there is a highlight Liquid directive you can try. It looks like this:

代码

{% highlight java %}
log.info("You're a wizard, Harry!");
log.error("I'm a what?");
{% endhighlight %}

结果

log.info("You're a wizard, Harry!");
log.error("I'm a what?");

highlight指令和代码围栏是独立的功能，但是 功能上非常相似。如果代码围栏没有按您希望的方式工作， 尝试一下 highlight 指令，看看它是否有更好的效果。

行号

目前，内联代码片段不能有行号；看 issue 128 for technical details. For now, if you want to have line numbers, use the Embedding external code approach below.

You might be familiar with the linenos argument to the highlight directive. Please do not use this. As of this writing (Q3 2021), it produces badly formed HTML output, which can break wiki pages.

使代码片段可执行和可编辑

通过启用 imjoy 扩展，您可以使代码片段可执行和可编辑。 它使 wiki 页面更具交互性，因此适合构建演示和教程。 目前，它支持 ImageJ 宏和 ImJoy 插件脚本。

要启用它，您需要：

  1. 将 imjoy 添加到您页面的 front matter 中的 extensions；
  2. 在代码块之前添加 HTML 注释 <!-- ImJoyPlugin: { ... } -->。在{}内，您可以传递用于设置 ImJoy 插件的设置。

以下是使 ImageJ 宏代码片段可执行的示例。

首先，在页面开头启用 imjoy 扩展：

---
title: My Awesome Page
extensions: ["imjoy"]
---

假设您有以下宏：

print("hello world");

要使其可执行，您只需添加 HTML 注释：

<!-- ImJoyPlugin: { "type": "macro"} -->
```javascript
打印（“你好世界”）；
```

有关将 ImageJ 宏与 ImageJ.JS 一起使用的更多详细说明，请参阅ImageJ.JS。

同样，您可以在代码围栏中执行 ImJoy 插件，该插件可用于集成图像查看器，例如 Kaibu、vizarr 和 ITK/VTK viewer，或通过 PyImageJ 在远程 Jupyter 服务器上运行 ImageJ2 和 Fiji（例如在 Binder 上）。欲了解更多详情，请参阅ImJoy。

嵌入外部代码

如果您在 GitHub、GitLab 或 BitBucket 等存储库中拥有代码， 您可以使用以下命令将代码块动态嵌入到页面中 code包括。这种方法的优点是可以避免 随着代码随着时间的推移而演变，复制粘贴会出现偏差。

code支持的参数包括：

参数 描述 支持的值 默认
service 哪个存储库托管服务 github、gitlab、bitbucket github
org 组织名称 任意字符串 无
repo 存储库名称 任意字符串 无
branch 哪个分支、标签或提交 任意字符串 无
path 源代码管理中资源的路径 任意字符串 无
line-start 要嵌入的第一行 >= 1 1
line-end 最后一行嵌入 >= 1 99999
label 放置在代码之前的超链接标签 任意字符串 没有标签

来自 GitHub 的嵌入

代码

{% include code
     org="duckythescientist"
     repo="obfuscatedLife"
     branch="original"
     path="life.c"
     label="Conway's Obfuscated Game of Life" %}

结果

GitHub 中的嵌入特别支持的其他参数：

参数 描述 支持的值 默认
show-border 是否在框架周围绘制边框 true 或 false true
show-line-numbers 是否对行进行编号 true 或 false true
show-file-meta 是否包含带链接的页脚 true 或 false true
show-copy 是否在鼠标悬停时包含“复制”按钮 true 或 false true

来自 GitLab 的嵌入

我们希望支持 GitLab 的嵌入，但尚未实现：

代码

{% include code
     service="gitlab"
     org="tjian-darzacq-lab"
     repo="Spot-On-TrackMate"
     branch="master"
     path="src/main/java/plugin/trackmate/action/ExportTracksToSpotOn.java"
     line-start=91 line-end=112
     label="Spot-On export TrackMate tracks to XML" %}

结果

Spot-On export TrackMate tracks to XML

Embedding content from GitLab is not yet supported. Are you a JavaScript developer who can make it happen? Reach out to us on the Image.sc Forum!

从 BitBucket 嵌入

我们希望支持 GitLab 的嵌入，但尚未实现：

代码

{% include code
     service="bitbucket"
     org="fernandoamat"
     repo="keller-lab-block-filetype"
     branch="d4755438000475d60e51ee2b793a7fd92c1be7fe"
     path="src/main/java/org/janelia/simview/klb/KLB.java"
     line-start=279 line-end=297
     label="Reading KLB data as ImgLib2 image" %}

结果

Reading KLB data as ImgLib2 image

Embedding content from BitBucket is not yet supported. Are you a JavaScript developer who can make it happen? Reach out to us on the Image.sc Forum!