小屋 → 大型 v10 重设计项目 → #027：代码语法高亮，第一部分

#027：代码语法高亮，第一部分

据我所知，我一直使用 Google Code Prettify 来为 CSS-Tricks 上的代码块应用语法高亮。你知道的，比如在 <div>test</div> 这样的代码行中，<div> 部分的颜色与 test 部分不同。这对于代码的可读性非常有帮助。它还有助于读者立即理解他们正在查看的是一个代码块（人们喜欢浏览文章，不是吗？）。

在这个新的设计中，我们决定改用新发布的 Prism.js。它更轻量级，速度也更快。它也专门针对 HTML、CSS 和 JavaScript 而设计，而这三种语言占了 CSS-Tricks 上 95% 的代码。我也很喜欢用于着色的类名是如何合理命名的。

我们开始弄清楚如何使用它。首先，我们告诉 CodeKit 将此库连接到我们的全局 JavaScript 文件中（目前该文件为空，但稍后我们将在这里编写代码）。我们在包含的页脚部分链接了压缩后的 JavaScript 文件。

我们花了一分钟才明白，你不需要“调用”任何东西，它只要在你使用了正确的类名的情况下就能工作。最后，我们稍微调整了一下 CSS，让代码看起来更像 CSS-Tricks 上一直以来的样子。

嘘！创建一个 DigitalOcean 账户并获得 $200 的免费信用额度 用于基于云的托管和服务。

评论

  1. Gray Ghost Visuals
    评论永久链接#

    Google Code Prettycrappify 必须是我见过的最笨重的公文包。

    看看这些 HTTP 请求！——顺便说一句，还有一个样式表。耶！另一个请求！

    <script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shCore.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushCSharp.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushPhp.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushJScript.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushJava.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushVb.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushSql.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushXml.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushDelphi.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushPython.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushRuby.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushCss.js"></script>
<script class="javascript" src="http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/shBrushCpp.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'http://blog.grayghostvisuals.com/wp-content/plugins/google-syntax-highlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

    如你所见，我正在寻求切换 :) 还有什么其他的工具可以同样赋予开发者将代码复制到剪贴板的能力，并且仍然保留行号，而无需上述糟糕的 HTTP 请求？

    最后，不要忘记你过去建议过的一个很酷的小工具，它可以使你的演示代码对标记友好；我现在正在使用它。
    http://www.elliotswan.com/postable

    回复
  2. Seth Hall
    评论永久链接#

    嘿，Chris，

    在 CodeKit 中，项目名称旁边的复选标记可能有助于缩短项目重新加载时间。我还没有检查，但这只是一个想法。

    回复
  3. Ahrengot
    评论永久链接#

    嘿，Chris，

    我猜你 WordPress 编辑器中的 [html] 和 [css] 按钮是

    <pre rel='css'>
    <code>
        /*content here ... */
    </code>
</pre>

    你有没有创建类似按钮的代码片段？

    回复
  4. blwoosky
    评论永久链接#

    嗨，Chris，
    我使用 Prism 来显示 HTML，但它不只适用于 HTML……（抱歉，我的英语不好，但我想你能理解我的意思。）这是页面
    http://csssong.com/hello-world/

    回复

发表评论

你的电子邮件地址不会被公开。 必填字段标有 *

© 2024 . All rights reserved.