emgithub 使用教程
项目介绍
emgithub 是一个开源工具,允许用户像嵌入 GitHub Gist 一样在博客或网站中嵌入 GitHub 仓库的代码片段。该项目通过简单的 URL 修改,即可生成嵌入代码,支持语法高亮、自定义高亮风格、渲染原始代码、Markdown 和 Jupyter Notebook 等功能。
项目快速启动
安装与使用
emgithub 无需安装,直接通过浏览器即可使用。以下是快速启动步骤:
-
访问 GitHub 仓库中的文件: 打开你想要嵌入的 GitHub 仓库文件,例如:
https://github.com/user/repo/blob/master/filename.ext
-
修改 URL: 在地址栏的 "github.com" 前加上 "em",变成:
https://emgithub.com/user/repo/blob/master/filename.ext
-
获取嵌入代码: 访问修改后的 URL,页面会显示嵌入代码,你可以选择
<script>
或<iframe>
方式嵌入到你的博客或网站中。
示例代码
以下是一个使用 <script>
标签嵌入代码的示例:
<script src="https://emgithub.com/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fuser%2Frepo%2Fblob%2Fmaster%2Ffilename.ext&style=agate&showBorder=on&showLineNumbers=on&showFileMeta=on&showCopy=on"></script>
应用案例和最佳实践
应用案例
- 技术博客:在技术博客中嵌入代码片段,方便读者查看和复制。
- 文档网站:在项目文档中嵌入示例代码,提高文档的可读性和实用性。
最佳实践
- 自定义样式:根据博客或网站的风格,选择合适的语法高亮样式。
- 代码复制功能:开启代码复制功能,方便读者快速复制代码。
- 行号显示:显示行号,便于读者定位代码位置。
典型生态项目
- GitHub Pages:使用 GitHub Pages 托管你的博客或网站,结合 emgithub 嵌入代码片段。
- Jekyll:如果你使用 Jekyll 搭建博客,可以轻松集成 emgithub 嵌入代码功能。
- Markdown 编辑器:在 Markdown 编辑器中使用 emgithub 嵌入代码,提高写作效率。
通过以上步骤和示例,你可以快速上手并充分利用 emgithub 的功能,提升你的技术博客或文档网站的用户体验。