制作一个“查看源代码”按钮

Remy Sharp 为 HTML5 演示创建了一个很酷的网站，每个单独的演示页面上都包含一个“查看源代码”按钮。点击它，您就可以看到您正在查看的页面的完整源代码。它不是弹出窗口或新标签页，而是直接在页面上显示源代码。我认为这很酷，所以我决定用自己的方式重新创建它。

花哨的方法

查看演示下载文件

第一个想到的想法是使用 CSS3 的 :target 伪类。我们之前在导出 CSS3 标签时讨论过这些。这个想法是使用一个链接到 #source-code 哈希标签的链接。这会将 #source-code 添加到 URL 的末尾，并允许 :target 选择器匹配并应用样式。基础知识

<a href="#source-code">View Source</a>

#source-code { display: none; }
#source-code:target { display: block; }

现在，只需要将 #source-code 元素填充为实际的源代码。这是 JavaScript 的领域，因为我们要动态获取代码，而不是为了显示而实际重复源代码。这样，无论何时更改页面，我们都不需要调整任何内容，我们的“查看源代码”按钮将显示所写的更新后的源代码。我们可以依靠 jQuery 来帮助我们

var html = $("html").html();

这将为我们提供页面的所有 HTML，只排除 DOCTYPE 和实际的 <html> 标签。您也可以通过 document.documentElement.innerHTML 来访问它，但是，如果我们要使用 jQuery，就只使用它。我们将创建一个全新的 <pre> 元素，用“伪造”的 DOCTYPE 和 html 标签填充它，然后将刚刚从页面收集的 HTML 放入其中。

收集的 HTML 有几个需要考虑的地方：1) 让我们对 <’s 进行转义，以便它们在页面上正确显示，而不会尝试渲染为实际的 HTML。2) 让我们“链接化”它找到的任何链接，以便它们可以被点击（部分摘自这里）。

然后，我们将新建的 <pre> 放置到我们的 #source-code div 中。

$(function() {
	$("<pre />", {
		"html":   '&lt;!DOCTYPE html>\n&lt;html>\n' + 
				$("html")
					.html()
					.replace(/[<>]/g, function(m) { return {'<':'&lt;','>':'&gt;'}[m]})
					.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>') + 
				'\n&lt;/html>'
	}).appendTo("#source-code");
});

关闭源代码非常简单。因为“查看源代码”按钮在被点击时会在页面上添加一个哈希标签，这意味着浏览器中的“后退”按钮会起作用。按下它会删除哈希标签，因此 #source-code 就不再是 :target，它会自动被 CSS 隐藏。#source-code div 中还有一个简单的“X”图形，它链接到哈希标签“#”，具有完全相同的效果。

这只是链接到“#”，它将我们的源代码查看元素移出 :target，从而立即隐藏它。

对代码进行样式设置

对代码应用语法高亮的其中一个最简单的方法是使用 google-code-prettify 项目。这是一个基于 JavaScript 的高亮器。基本上，您需要链接到下载中附带的 JavaScript 文件和 CSS 文件

<link rel='stylesheet' href='css/prettify.css' />
<script src="prettify/prettify.js"></script>

确保您的 <pre> 标签具有“prettyprint”类。我将其添加到我们用于创建 <pre> 的元素创建语法中

"class": "prettyprint"

并在页面准备就绪时调用 prettyPrint() 函数。他们建议在 body 标签中添加 onload，但是，由于我们使用的是 jQuery DOM ready 函数，因此我们只需在其中调用它即可。

我稍微调整了颜色，以便在深色背景上使用。这是 prettify.css 文件的顶部部分

.str { color: #61ff74; }
.kwd { color: #ea5eff; }
.com { color: white; }
.typ { color: red; }
.lit { color: red; }
.pun { color: white; }
.pln { color: white; }
.tag { color: #ffab58; }
.atn { color: #fabb4e; }
.atv { color: #ffd996; }
.dec { color: red; }

Prettify 通过将代码的各个部分包装在跨度中来工作，从而对该部分进行着色。还要注意正确转义的字符。

兼容性

几乎所有现代浏览器都支持它，只要它支持 CSS3 :target 即可。在 IE 8 及更低版本中存在问题，但在 IE 9 中则可以正常工作。

原始方法

Firefox 和 Chrome 支持 URL 协议“view-source:”，它会打开其本地的源代码查看器。如果您只为自己创建这些链接，您可以执行以下操作

<a class="button" onClick='window.location="view-source:" + window.location.href'>View Source</a>

Remy 的方法

事实证明，我的做法与在 HTML5 演示页面上的做法大不相同。这是我对他的技术进行解释的尝试

监视所有点击
如果点击的是一个带有哈希标签 #view-source 的链接…
在 body 中添加一个名为 .view-source 的类名（此类会显示原本隐藏的 <pre>）。
如果还没有，则将一个 <pre> 附加到 body 中，ID 为 #view-source
<pre> 用从 document.documentElement.innerHTML 获取的 HTML 填充。
设置一个计时器，每 200 毫秒检查一次，看 URL 中是否仍然包含哈希标签 #view-source。
如果哈希标签消失了或发生了变化，则从 body 中删除类名（隐藏 <pre>）并取消计时器。

(function () {

var pre = document.createElement('pre');
pre.id = "view-source"

// private scope to avoid conflicts with demos
addEvent(window, 'click', function (event) {
  if (event.target.hash == '#view-source') {
    // event.preventDefault();
    if (!document.getElementById('view-source')) {
      pre.innerHTML = ('<!DOCTYPE html>\n<html>\n' + document.documentElement.innerHTML + '\n</html>').replace(/[<>]/g, function (m) { return {'<':'&lt;','>':'&gt;'}[m]});
      document.body.appendChild(pre);      
    }
    document.body.className = 'view-source';
    
    var sourceTimer = setInterval(function () {
      if (window.location.hash != '#view-source') {
        clearInterval(sourceTimer);
        document.body.className = '';
      }
    }, 200);
  }
});
  
})();

然后是巧妙的 CSS 代码，它允许源代码在正常情况下隐藏，并在 body 获得 .view-source 类时接管屏幕。

#view-source {
  display: none;
}

body.view-source > * {
  display: none;
}

body.view-source #view-source {
  display: block !important;
}

重大优势

Remy 的方法最酷的地方在于，它比我的想法跨浏览器兼容性强得多。它使用的是纯 JavaScript，因此它完全不依赖于库，并且不使用任何“花哨”的技术，这些技术在较旧的浏览器中无法正常工作。例如，他本可以使用 hashchange 事件来监视 #view-source 何时消失，但它在一些较旧的浏览器中不受支持，因此即使这一点也得到了很好的处理。

用法

当然，您可以随意使用它。

查看演示下载文件

以其目前的形态，这段代码依赖于页面上的特定标记，即按钮本身和 #view-source div。这肯定可以转换为一个插件，该插件会自动附加这些内容，从而使它更容易实现。我可能最终会这样做。

这也让我想到了两件事：1) 我真的需要尽快将语法高亮功能添加到 CSS-Tricks 上的博客设计中，2) 我应该在所有演示页面上使用“查看源代码”功能。这两件事都会及时完成。

另一件很酷的事情是将其制作成书签。这对于 Safari 来说尤其酷，因为它具有糟糕的“查看源代码”功能（虽然有一个扩展程序可以解决这个问题）。尽管如此，没有一个浏览器在模式窗口中显示源代码，我认为这有时比打开新窗口或新标签页更好。

Liam McKay

# 2010 年 10 月 8 日

这实际上是一个很棒的解决方案。很多时候，我发现教程或文章中编写的源代码看起来有点乱或损坏。这是一个很棒的替代方案，谢谢，伙计。

Bradley

# 2010 年 10 月 8 日

在 FF 中，当您向下滚动模式时，文本会变得模糊。仅仅是我的初步猜测，但我认为这是由于透明度造成的。

Jeff Starr

# 2010 年 10 月 8 日

很棒的东西！我肯定会将它用在 Perishable Press 上。感谢与我们分享！

此外，请检查下载链接 - 我遇到了 404 错误。

piyansitll

# 2010 年 10 月 8 日

哇，非常棒的工作，Chris，非常感谢。

Martin Ansty

# 2010 年 10 月 8 日

这很棒，还有更多非常实用的东西。尤其是您已经提出了几种实现类似目标的方法。但是，您的“花哨”方法在使用 Modenizr 时似乎遇到了问题；Modenizr 似乎在某个时候向页面头部添加了一大块难看的代码（主要是 @fontface 数据字符串）。通过使用 jQuery 在 DOM 就绪时附加 html，它会拾取这些内容。这不是什么大问题，但我认为如果您有人想知道这块巨大的难看代码是从哪里来的，我会说一下。

Remy Sharp

# 2010 年 10 月 8 日

嘿，克里斯，很高兴看到我自己的作品被反编译了（换个说法）。

你绝对是对的：“他本可以使用 hashchange 事件”——我 *真的* 想用它（我可能仍然会使用它并延迟到一个计时器），但同样你也是对的，因为我想支持更多的浏览器——并且由于查看源代码可能只发生在少数用户身上，并且在查看源代码的“查看”中他们不会做太多，我认为一个计时器对于这项工作来说是足够好的。

不过文章写得不错 :)

John Deerhake

# 2010 年 10 月 8 日

这种方法的一个有趣的副作用是，它实际上向你展示了 DOM 的当前状态，而不仅仅是页面源代码。在某些情况下，拥有指向原始源代码（使用“view-source”链接或在页面加载时将其保存到 JS 变量中）和 DOM 在被 JavaScript 更改后的状态的链接可能是有用的。

John Deerhake

永久链接到评论# 2010 年 10 月 8 日

编辑：实际上，在阅读完这篇文章之后，我发现它是保存在页面加载时。但是你可以在需要的时候进行操作，并且有一个查看源代码按钮可以显示页面的当前状态。

Cory

# 2010 年 10 月 8 日

克里斯，做得好。很喜欢这样。

Ryan

# 2010 年 10 月 8 日

克里斯，这太有用了。谢谢！

Sahan

# 2010 年 10 月 9 日

好主意！对于 PSD 到 HTML 的作品集非常有用 :)

Joss

# 2010 年 10 月 9 日

非常酷的解构——两种方法都很有效。这只是表明，做一件事通常不止一种正确的方法。

Gurvinder

# 2010 年 10 月 9 日

这确实是一个很酷的想法，请记住 Safari 不会显示颜色代码。但请注意，此演示在 IE8 和 Beta IE9 中不起作用。

tully

# 2010 年 10 月 9 日

废话。为什么要重新发明轮子？每个浏览器都已具备查看源代码的功能，所以除了不必要的代码膨胀和“哇，好闪亮！”效果之外，还有什么意义呢？如果你将其用作伪 :target 选择器的演示，那么这很好，但我不会建议任何人实际使用它。

Karim

# 2010 年 10 月 9 日

哇！克里斯，做得好，非常感谢 :-)

Remy Sharp

# 2010 年 10 月 10 日

忘了之前分享这个了。这是我写的用于查看源代码的书签。你可能会问：“为什么？”——因为我的 iPhone 没有查看源代码按钮——大多数非桌面浏览器也没有。

javascript:(function(d,h)%7Bh=d.documentElement.innerHTML;d.open();d.write('%3Cpre%3E'+('%3C!DOCTYPE%20html%3E%3Chtml%3E'+h+'%3C/html%3E').replace(/%5B%3C%3E%5D/g,function(m)%7Breturn%7B'%3C':'<','%3E':'>'%7D%5Bm%5D%7D)+'%3C/pre%3E')%7D)(document);

查看源代码

希望这对其他人有用。

tully

永久链接到评论# 2010 年 10 月 10 日

我认为，在 iPhone 或其他“非桌面”浏览器中，*非常* 不需要能够查看源代码。你是在 iPhone 上进行开发吗？如果是，也许我们应该开始一个基金来为你提供一个更好的工作环境；)

实际上，此功能应该是浏览器的一部分，并且不应该将解决浏览器缺少基本功能问题的任务留给 Web 开发人员，而应该留给浏览器开发人员。
Remy Sharp

永久链接到评论# 2010 年 10 月 11 日

> 寻找解决浏览器缺少基本功能问题的方案不应该留给 Web 开发人员

没错。就像 IE 的 PNG 修复。或者 WebSockets 闪存屏蔽。或者任何其他那些 Web 开发人员为浏览器缺少功能而创建的解决方案。

（抱歉，违反了规则 #1）

sojabob

# 2010 年 10 月 10 日

这是一个真正有用且不错的工具，感谢您展示“如何做” :)

Giacomo Colddesign

# 2010 年 10 月 11 日

非常棒的教程，感谢分享！

Jason

# 2010 年 10 月 11 日

这是一个展示源代码的好方法。克里斯，文章写得不错！

BebopDesigner

# 2010 年 10 月 11 日

这真的太酷了！感谢分享

Northern Virginia Web Designer

# 2010 年 10 月 11 日

非常棒！感谢分享！

这对那些想要查看我的代码而不想使用浏览器中的查看页面源代码的人来说非常完美。我计划在我的网站作品集中加入它，并在下一轮更新中进行更新。

Jeremy Carlson

# 2010 年 10 月 11 日

好吧。我会尽快为我的演示页面窃取它。克里斯，文章写得不错。

Lisa Thomason

# 2010 年 10 月 12 日

雷米的想法很棒，而且用一些样式来查看源代码要好得多，很棒的教程，CSS-Tricks 博客中添加语法高亮和查看所有演示页面的源代码功能将会很棒。LT

Julian

# 2010 年 10 月 12 日

脚本是可以理解的

除了

.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,’$1‘) +

仍然不知道

Ben Allen

永久链接到评论# 2010 年 10 月 14 日

是时候让你研究一下正则表达式了。这个表达式将源代码中的 URL 转换为可点击的链接。在正确使用时，它们非常强大！

Vertex

# 2010 年 10 月 12 日

有没有可能添加一个外部链接来显示源代码？

amidude

# 2010 年 10 月 12 日

非常好

Brian Lang

# 2010 年 10 月 12 日

有没有办法换行长行以防止水平滚动？也许可以在换行行的开头使用换行符…

Hiren Khambhayta

# 2010 年 10 月 12 日

真的很棒。继续加油。很棒的灵感来源。

Mia Lazar

# 2010 年 10 月 13 日

旧技巧，但有新功能，很酷。

Hair

# 2010 年 10 月 13 日

这确实是一个很棒的技巧。我会尝试使用它。谢谢…

molokoloco

# 2010 年 10 月 14 日

你好，

你的代码很好，还可以进行一些调整…
但最简单的方法是直接放在 href 链接中

“view-source:http://example.com/mypage.html” 就这样；)

http://en.wikipedia.org/wiki/View-source_URI_scheme

Jay

# 2010 年 10 月 17 日

亲爱的克里斯，

你在图片中使用了什么字体！？我一直都在寻找它，但找不到！

Poker Online

# 2010 年 10 月 18 日

很棒的教程，感谢分享，我将尝试在我的网站上使用这段代码。希望它能起作用。

Eye Bridge

# 2010 年 10 月 18 日

很好的解决方案。感谢与我们分享

keith

# 2010 年 10 月 21 日

感谢您提供这款酷炫的脚本。我可以在很多地方使用它。

Scentsy

# 2010 年 10 月 22 日

虽然知识永远不会过时，而且学习一些新东西很有趣，但我仍然是老派。另外，我在下载过程中没有收到 404 错误。:)

Kevin

# 2010 年 10 月 24 日

真的很棒的技巧，我可以在我的一个博客中使用它！谢谢，克里斯

Beben Koben

# 2010 年 11 月 1 日

我正在使用 Mozilla Firefox 3.6.3，只需像这样编写，我们就可以创建一个简单的链接源
查看源代码
Hihihi :D
这里有很多很棒的教程 \m/

Graphic Eye India

# 2010 年 11 月 1 日

真的非常棒的信息……非常棒的解决方案，感谢分享！！！

Curtis Blackwell

# 2010 年 11 月 22 日

我喜欢这个漂亮的查看源代码按钮，但我有一个非对抗性的批评
我不喜欢的是，如果我查看源代码，然后关闭弹出窗口，然后点击后退按钮（试图实际返回到上一页），弹出窗口会再次弹出。我知道这是因为哈希标签和 :target 伪元素；我只是想说，这个小问题让我无法享受它。如果有解决办法，我很想知道。

Mohammad Wali

# 2013 年 11 月 15 日

请问有人可以解释一下如何像语法高亮器一样为<pre>标签创建一个查看源代码按钮吗？

乐高星球大战电子游戏秘籍和代码

# 2013年12月10日

类似地，新版本的操作系统可能会利用新技术，同时放弃对
多年以前的老技术或系统规范的支持。
那么如何用Mac – X DVD Ripper Free Edition来刻录DVD呢？
请参阅下面关于为什么有些光盘无法刻录的更多信息。

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。