带有源代码github的html网页示例 - Html

在开发网页时，展示源代码可以方便程序员进行学习和交流。而Github作为全球最大的开源社区，为程序员提供了易于使用和分享代码的平台。今天我们将介绍如何将Github上的源代码嵌入到HTML网页中。

Github代码展示插件

Github提供了自己的代码展示插件，可以在网页上展示Github上的代码，使用非常方便。下面我们将展示如何使用这个插件。

步骤1：创建Github仓库

首先，你需要在Github上创建一个仓库来存放你的代码，如下图所示：

步骤2：将代码上传到仓库

将你的代码上传到刚刚创建的仓库中。在Github网站上，进入仓库页面，点击编辑按钮，把你的代码复制到编辑框中，然后点击提交按钮。

步骤3：获取代码的嵌入链接

在Github仓库页面上，点击Code按钮，然后选择Embed选项卡。复制给出的HTML代码。

步骤4：将代码嵌入到HTML网页中

在需要嵌入代码的HTML页面中，添加下面的代码片段：

<!-- Github代码展示插件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wayou/github-markdown-css/github-markdown.min.css">
<script src="https://cdn.jsdelivr.net/gh/wayou/github-fork-ribbon-css/gh-fork-ribbon.min.js"></script>

<div class="github-fork-ribbon-wrapper right fixed" onclick="window.open('YOUR_GITHUB_URL_HERE')">
    <div class="github-fork-ribbon">
        View on Github
    </div>
</div>

<div class="markdown-body">
    <iframe src="YOUR_EMBEDED_LINK_HERE" frameborder="0"></iframe>
</div>

将YOUR_EMBEDED_LINK_HERE替换为你在步骤3中复制的嵌入链接。将YOUR_GITHUB_URL_HERE替换为你的Github仓库页面链接。

示例

以下是使用Github代码展示插件展示一个简单的HTML文件的效果。

总结

在本文中，我们介绍了如何将Github上的源代码嵌入到HTML网页中，让程序员能够更方便地学习和分享代码。希望这篇文章对你有所帮助。