跳至主要内容

使用非代码文件

GitHub 支持渲染和比较多种非代码文件格式。

渲染和比较图像

GitHub 可以显示几种常见的图像格式,包括 PNG、JPG、GIF、PSD 和 SVG。除了简单地显示它们之外,还有几种方法可以比较这些图像格式的不同版本之间的差异。

注意

  • GitHub 不支持比较 PSD 文件之间的差异。
  • 如果您使用的是 Firefox 浏览器,GitHub 上的 SVG 可能无法渲染。

查看图像

您可以在 GitHub.com 上直接浏览和查看存储库中的图像。

SVG 目前不支持内联脚本或动画。

查看差异

您可以以三种不同的模式直观地比较图像:2-up滑动洋葱皮

2-up

2-up 是默认模式;它可以让您快速浏览两张图像。此外,如果图像在版本之间改变了大小,则会显示实际的尺寸变化。这应该可以清楚地表明何时进行了调整大小,例如当资产升级到更高分辨率时。

Screenshot of a diff for an image in 2-up mode. The image on the right is outlined in green and larger than the image on the left, which is outlined in red.

滑动

滑动 允许您并排查看图像的部分。不确定颜色是否在不同版本之间发生了变化?将滑动滑块拖到有问题的区域并自行比较像素。

Screenshot of a diff for an image in swipe mode. A line down the center divides the image into new, outlined in green, and old, outlined in red.

洋葱皮

洋葱皮 在元素以微小、难以察觉的量移动时非常有用。图标是否向左移动了两个像素?将不透明度滑块向后拖动一点,看看是否发生了移动。

3D 文件查看器

GitHub 可以托管和渲染扩展名为 .stl 的 3D 文件。

当直接查看 GitHub 上的 STL 文件时,您可以

  • 单击并拖动以旋转模型。
  • 右键单击并拖动以平移视图。
  • 滚动以放大和缩小。
  • 单击不同的视图模式以更改视图。

修复性能缓慢

如果您看到 在查看器的角落,带有工具提示“WebGL 支持的硬件不可用”,则您的浏览器上不可用 WebGL 技术。

WebGL 是充分利用计算机硬件的必要条件。我们建议您尝试使用 ChromeFirefox 等浏览器,这些浏览器默认启用了 WebGL。

错误:“无法显示”

如果您的模型无效,GitHub 可能无法显示该文件。此外,大于 10 MB 的文件太大,GitHub 无法显示。

在其他地方嵌入模型

要在互联网上的其他地方显示您的 3D 文件,请修改此模板并将其放置在支持 JavaScript 的任何 HTML 页面上

<script src="https://embed.github.com/view/3d/<username>/<repo>/<ref>/<path_to_file>"></script>

例如,如果您的模型 URL 是 github.com/skalnik/secret-bear-clip/blob/master/stl/clip.stl,您的嵌入代码将是

<script src="https://embed.github.com/view/3d/skalnik/secret-bear-clip/master/stl/clip.stl"></script>

默认情况下,嵌入式渲染器宽 420 像素,高 620 像素,但您可以通过在 URL 末尾传递高度和宽度变量作为参数来自定义输出,例如 ?height=300&width=500

注意ref 可以是分支或指向单个提交的哈希值(如 2391ae)。

在 Markdown 中渲染

您可以在 Markdown 中直接嵌入 ASCII STL 语法。有关更多信息,请参阅“创建图表”。

渲染 CSV 和 TSV 数据

GitHub 支持以 .csv(逗号分隔)和 .tsv(制表符分隔)文件的形式渲染表格数据。

Screenshot of a rendered CSV file, with data shown in a table format.

在查看时,提交到 GitHub.com 上存储库的任何 .csv.tsv 文件都会自动渲染为交互式表格,包括标题和行号。默认情况下,我们始终假设第一行是您的标题行。

您可以通过单击行号链接到特定行,或按住 Shift 键选择多行。只需复制 URL 并将其发送给朋友。

搜索数据

如果您想在数据集中查找特定值,可以直接在文件上方的搜索栏中开始输入。行将自动过滤。

处理错误

偶尔,您可能会发现您的 CSV 或 TSV 文件没有渲染。在这些情况下,您的原始文本上方会出现一条消息,建议可能是什么错误。

Screenshot of a text view of a CSV file. In the header, a message points out an error: "No commas found in this CSV file in line 0."

常见错误包括

  • 列数不匹配。您必须在每行中具有相同数量的分隔符,即使单元格为空也是如此
  • 超过文件大小。我们的渲染仅适用于不超过 512KB 的文件。大于此的文件会减慢浏览器速度。
  • 使用不支持的分隔符,例如分号而不是逗号。

渲染 PDF 文档

GitHub 支持渲染 PDF 文档。

目前,PDF 中的链接会被忽略。

散文文档的渲染差异

包含散文文档的提交和拉取请求能够以源代码渲染视图的形式呈现这些文档。

源代码视图显示已键入的原始文本,而渲染视图显示该文本在 GitHub 上渲染后的外观。例如,这可能是 Markdown 中显示**bold**与渲染视图中显示bold之间的区别。

散文渲染支持由github/markup支持的渲染文档。

  • Markdown
  • AsciiDoc
  • Textile
  • ReStructuredText
  • Rdoc
  • Org
  • Creole
  • MediaWiki
  • Pod

要查看作为提交的一部分对文档所做的更改,请单击 .

Screenshot of the diff for a Markdown file. In the header of the file, a file icon is outlined in dark orange.

此“富文本差异”突出显示了已添加和删除的代码。

Screenshot of the diff for a Markdown file. "@octo-org/core" is struck through, with a red background, followed by "@octocat", with a green background.

禁用 Markdown 渲染

查看 Markdown 文件时,您可以单击文件顶部的代码以禁用 Markdown 渲染,并改为查看文件的源代码。

Screenshot of a Markdown file in a GitHub repository showing options for interacting with the file. A button, labeled "Code", is outlined in dark orange.

禁用 Markdown 渲染使您能够使用源代码视图功能,例如行链接,这在查看渲染后的 Markdown 文件时是不可能的。

可视化属性更改

我们提供一个工具提示,描述对属性的更改,这些属性与单词不同,在渲染后的文档中不可见。例如,如果链接 URL 从一个网站更改为另一个网站,我们将显示如下工具提示

Screenshot of the diff for a Markdown file. A tooltip over a link says "href: /octo-org-repo/blob/CONTRIBUTING -> /octo-org/octo-repo/blob/docs/CONTRIBUTING."

评论更改

提交评论只能在源代码视图中逐行添加到文件。

链接到标题

其他渲染的散文文档一样,将鼠标悬停在文档中的标题上会创建一个链接图标。您可以将渲染的散文差异的读者链接到特定部分。

查看复杂的差异

一些拉取请求涉及大量更改,其中包含大型、复杂的文档。当更改分析时间过长时,GitHub 无法始终生成更改的渲染视图。如果发生这种情况,您在单击渲染按钮时会看到错误消息。

您仍然可以使用源代码视图来分析和评论更改。

查看 HTML 元素

我们不支持直接渲染提交到 HTML 文档的视图。某些格式,例如 Markdown,允许您在文档中嵌入任意 HTML。当这些文档在 GitHub 上显示时,其中一些嵌入的 HTML 可以在预览中显示,而另一些(例如嵌入的 YouTube 视频)则不能。

通常,包含嵌入 HTML 的文档的更改的渲染视图将显示对 GitHub 文档视图中支持的元素的更改。包含嵌入 HTML 的文档的更改应始终在渲染视图和源视图中进行审查,以确保完整性。

在 GitHub 上映射 GeoJSON/TopoJSON 文件

GitHub 支持在 GitHub 存储库中渲染 GeoJSON 和 TopoJSON 地图文件。像往常一样使用 .geojson.topojson 扩展名提交文件。具有 .json 扩展名的文件也受支持,但前提是 type 设置为 FeatureCollectionGeometryCollectiontopology。然后,导航到 GitHub 上 GeoJSON/TopoJSON 文件的路径。

几何类型

GitHub 上的地图使用 Leaflet.js 并支持 geoJSON 规范 中概述的所有几何类型(点、线串、多边形、多点、多线串、多边形和几何集合)。TopoJSON 文件应为“拓扑”类型,并符合 TopoJSON 规范

将您的地图嵌入其他地方

想要让您的 GeoJSON 地图在 GitHub 以外的地方可用?只需修改此模板,并将其放置在任何支持 JavaScript 的 HTML 页面中(例如,GitHub Pages)。

<script src="https://embed.github.com/view/geojson/<username>/<repo>/<ref>/<path_to_file>"></script>

例如,如果您的地图的 URL 是 github.com/benbalter/dc-wifi-social/blob/master/bars.geojson,您的嵌入代码将是

<script src="https://embed.github.com/view/geojson/benbalter/dc-wifi-social/master/bars.geojson"></script>

默认情况下,嵌入的地图大小为 420px x 620px,但您可以通过在末尾传递高度和宽度变量作为参数来自定义输出,例如 ?height=300&width=500

注意ref 可以是分支或指向单个提交的哈希值(如 2391ae)。

Markdown 中的地图

您可以在 Markdown 中直接嵌入 GeoJSON 和 TopoJSON。有关更多信息,请参阅“创建图表”。

聚类

如果您的地图包含大量标记(大约超过 750 个),GitHub 会在更高的缩放级别自动将附近的标记聚类。只需单击聚类或放大即可查看单个标记。

底层地图有问题

底层地图数据(街道名称、道路等)由 OpenStreetMap 提供,这是一个创建免费可编辑世界地图的协作项目。如果您发现某些内容不正确,由于它是开源的,只需 注册 并提交修复。

GeoJSON/TopoJSON 文件故障排除

如果您在渲染 GeoJSON 文件时遇到问题,请通过 GeoJSON linter 运行它,确保您拥有有效的 GeoJSON 文件。如果您的点没有出现在您预期的地方(例如,在海洋中间),则可能是数据位于当前不支持的投影中。目前,GitHub 仅支持 urn:ogc:def:crs:OGC:1.3:CRS84 投影。

此外,如果您的 .geojson 文件特别大(超过 10 MB),则无法在浏览器中渲染。如果是这种情况,您通常会看到一条消息,说明我们无法显示如此大的文件。

您仍然可以通过将 .geojson 文件转换为 TopoJSON 来渲染数据,TopoJSON 是一种压缩格式,在某些情况下可以将文件大小减少高达 80%。当然,您始终可以将文件分解成更小的块(例如按州或按年),并将数据存储为存储库中的多个文件。

有关 GeoJSON/TopoJSON 的更多阅读

在 GitHub 上使用 Jupyter Notebook 文件

当您在 GitHub.com 上添加具有 .ipynb 扩展名的 Jupyter Notebook 或 IPython Notebook 文件时,它们将在您的存储库中呈现为静态 HTML 文件。

笔记本的交互式功能(例如自定义 JavaScript 图表)在 GitHub.com 上的存储库中将无法使用。例如,请参阅 Linking and Interactions.ipynb

要查看渲染了 JavaScript 内容的 Jupyter 笔记本或与他人共享您的笔记本文件,您可以使用 nbviewer。例如,请参阅在 nbviewer 上渲染的 Linking and Interactions.ipynb

要查看 Jupyter Notebook 的完全交互式版本,您可以在本地设置一个 notebook 服务器。有关更多信息,请参阅 Jupyter 的官方文档

Jupyter Notebook 文件故障排除

如果您在静态 HTML 中渲染 Jupyter Notebook 文件时遇到问题,您可以使用 nbconvert 命令 在命令行上本地转换文件。

jupyter nbconvert --to html NOTEBOOK-NAME.ipynb

关于 Jupyter Notebook 的进一步阅读

在 GitHub 上显示 Mermaid 文件

GitHub 支持在仓库中渲染 Mermaid 文件。像往常一样使用 .mermaid.mmd 扩展名提交文件。然后,导航到 GitHub 上的 Mermaid 文件路径。

例如,如果您将包含以下内容的 .mmd 文件添加到您的仓库

graph TD
    A[Friend's Birthday] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D["Cool <br> Laptop"]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

当您在仓库中查看文件时,它将被渲染为流程图。

Screenshot of a flow chart. Two arrows point from a box labeled "A" to boxes labeled "B" and "C," and two more arrows point from "B" and "C" to "D."

Mermaid 文件故障排除

如果您的图表根本没有渲染,请使用 Mermaid 实时编辑器 检查您的图表,以验证它是否包含有效的 Mermaid Markdown 语法。

如果图表显示,但没有按预期显示,您可以创建一个新的 GitHub 社区讨论,并添加 Mermaid 标签。

已知问题

  • 序列图图表经常在图表下方渲染额外的填充,随着图表大小的增加,填充也会增加。这是 Mermaid 库中的一个已知问题。
  • 带有弹出菜单的参与者节点在序列图图表中无法按预期工作。这是由于当使用 Mermaid 库的 API 渲染图表时,JavaScript 事件添加到图表的方式存在差异。
  • 并非所有图表都符合 a11y 标准。这可能会影响依赖屏幕阅读器的用户。

Markdown 中的 Mermaid

您可以在 Markdown 中直接嵌入 Mermaid 语法。有关更多信息,请参阅“创建图表”。

关于 Mermaid 的进一步阅读