如何将代码发布到您的博客和其他宗教观点

最新推荐文章于 2024-10-02 10:53:34 发布

cunfuteng7334

最新推荐文章于 2024-10-02 10:53:34 发布

阅读量239

点赞数

文章标签： python java linux javascript php ViewUI

原文链接：https://www.hanselman.com/blog/how-to-post-code-to-your-blog-and-other-religious-arguments

版权

If you've got a programming blog, chances are you'll want to post some code snippets. Posting code sounds easy but it's surprisingly tricky if you consider all the ways that people will be reading your blog. There's a number of ways. Here's a few and their pros and cons.

如果您有编程博客，则可能需要发布一些代码片段。发布代码听起来很容易，但是如果您考虑人们将如何阅读您的博客的所有方式，这将是令人惊讶的棘手。有很多方法。 这里有一些优点和缺点。

从您的IDE复制粘贴(例如，像Visual Studio) (Copy Paste from your IDE (like Visual Studio, for example))

If I copy paste directly from VS into my editor of choice, Windows Live Writer, I'll get a <pre> section.

如果将粘贴直接从VS复制到我选择的Windows Live Writer编辑器中，则会得到一个<pre>部分。

using System;
 
namespace WindowsGame1
{
#if WINDOWS || XBOX
    static class Program
    {
        /// <summary>
        /// The main entry point for the application.
        /// </summary>
        static void Main(string[] args)
        {
            using (Game1 game = new Game1())
            {
                game.Run();
            }
        }
    }
#endif
}

Pros:

优点：

It's just text.
这只是文字。
Looks the same everywhere.
到处看起来都一样。
Code is in a pre and you can apply css rules to pre's if you like.
代码在pre中，如果您愿意，可以将css规则应用于pre。

Cons:

缺点：

It's just text.
这只是文字。
Looks the same everywhere.
到处看起来都一样。

I can also go to the Visual Studio Gallery and get the Copy As HTML Extension from inside the "Productivity Power Tools." When someone names something "Productivity Power Tools" but doesn't include it out of the box that means they are "things that aren't totally tested and that would blow your mind if we did include them in the box so just get them and be happy but we are sorry we didn't ship them straight away."

我还可以转到Visual Studio Gallery，并从“生产力强大的工具”中获取“另存为HTML”扩展。当某人命名为“ Productivity Power Tools”但没有将其开箱即用时，这意味着它们是“未经完全测试的东西，如果我们确实将它们包括在包装盒中，您将大为震惊。感到高兴，但很抱歉，我们没有立即将它们运送出去。”

Once this extension is plugged in, when I Ctrl-C some text, VS adds not just plain text to the clipboard but also rich HTML and what-not.

插入此扩展名后，当我Ctrl-C某些文本时，VS不仅将纯文本添加到剪贴板，还添加了丰富HTML和其他内容。

using System;
 
namespace WindowsGame1
{
#if WINDOWS || XBOX
    static class Program
    {
        /// <summary>
        /// The main entry point for the application.
        /// </summary>
        static void Main(string[] args)
        {
            using (Game1 game = new Game1())
            {
                game.Run();
            }
        }
    }
#endif
}

This looks lovely, but it includes a pile of <spans> and now my code is a bunch of marked up HTML, rather than a block of code.

这看起来很可爱，但其中包含一堆<spans>，现在我的代码是一堆标记好HTML，而不是代码块。

Pros:

优点：

Looks the same everywhere, RSS or on your site. Consistent.
在RSS或您的网站上到处看起来都一样。一致。
Will always look like this, no need to change anything.
永远看起来像这样，无需更改任何内容。

Cons:

缺点：

Inline styles and colors. Ick.
内联样式和颜色。 ck
Span-itis.
跨膜炎。
Stores the formatting in your blog system directly (in the DB, etc)
将格式直接存储在博客系统中(在数据库等中)
Will always look like this, you can't change anything.
总是这样，您无法更改任何内容。

使用PreCode和SyntaxHighlighter (Using PreCode and SyntaxHighlighter)

PreCode is Anthony Bouch's Windows Live Writer plugin. SyntaxHighlighter is Alex Gorbatchev's JavaScript (that's client-side) syntax highlighter. SyntaxHighlighter highlights your code locally using <pre> blogs that are marked for specific languages. You include "brushes" for just the langugaes you care about. This is the combination that I currently use.

PreCode是Anthony Bouch的Windows Live Writer插件。 SyntaxHighlighter是Alex Gorbatchev的JavaScript(客户端)语法突出显示器。 SyntaxHighlighter使用标记为特定语言的<pre>博客在本地突出显示您的代码。您只需为自己关心的语言添加“画笔”即可。这是我目前使用的组合。

SyntaxHighlighter is definitely the client-side highlighter of choice, but there are others you might also check out including:

SyntaxHighlighter绝对是首选的客户端荧光笔，但是您可能还会检查其他一些内容，包括：

Chili Highlighter - Hosted on Google Code
辣椒荧光笔-托管在Google Code上
Google Code Prettify - This is the code highlighter that Google themselves use on Google Code. It doesn't require you to specify the language. It works on most C-style languages, works iffy on Ruby, PHP and VB, and needs extensions for LISP and F# and others.
Google Code Prettify-这是Google自己在Google Code上使用的代码突出显示工具。它不需要您指定语言。它适用于大多数C风格的语言，对Ruby，PHP和VB较弱，并且需要LISP和F＃等的扩展。

NOTE: Make sure whatever one you pick that you're cool with the OSS license for your library of choice.

注意：确保选择的任何设备都对所选库的OSS许可证很满意。

From within Live Writer you click "Insert PreCode Snippet" and paste your snippet in. It has a number of nice options. I use HTML encode and "replace line endings with <br/> which is required for use in DasBlog for historical reasons. It also has a number of SyntaxHighlighter specific options for doing line-highlights or turning the toolbar on and off.

在Live Writer中，单击“插入PreCode代码段”并将其粘贴到其中。它有许多不错的选项。我使用HTML编码，并出于历史原因在DasBlog中使用“用<br/>替换行尾。出于历史原因，它必须在DasBlog中使用。它还具有许多SyntaxHighlighter特定选项，用于进行行高亮显示或打开或关闭工具栏。

This creates output like this. Here's the trick, though. If you are reading this post via RSS, you're seeing just plain text. You need to visit this post on my site directly in order to see pretty fonts and colors because the JavaScript isn't firing in your RSS Reader.

这将创建这样的输出。 不过，这是窍门。 如果您通过RSS阅读这篇文章，那么您只会看到纯文本。您需要直接在我的网站上访问此帖子，以查看漂亮的字体和颜色，因为JavaScript并未在RSS阅读器中启动。

It's created a <pre> that looks like this <pre class="brush: csharp; auto-links: false;"> and the JavaScript comes around later and processes it in the browser.

它创建了一个<pre>，看起来像这样的<pre class =“ brush：csharp; auto-links：false;”>，随后出现了JavaScript，并在浏览器中对其进行了处理。

using System;

namespace WindowsGame1
{
#if WINDOWS || XBOX
    static class Program
    {
        /// <summary>
        /// The main entry point for the application.
        /// </summary>
        static void Main(string[] args)
        {
            using (Game1 game = new Game1())
            {
                game.Run();
            }
        }
    }
#endif
}

Pros:

优点：

Having code stored in a pre means there's no formatting stored in your blog system.
将代码存储在pre中意味着您的博客系统中没有格式存储。
Looks great in any browser with JavaScript
在任何使用JavaScript的浏览器中看起来都很棒
You can choose themes and change the look and feel of your code whatever
您可以选择主题并更改代码的外观
You also get nice printing support, toolbars, line highlighting, etc.
您还将获得不错的打印支持，工具栏，行高亮显示等。

Cons:

缺点：

RSS readers effectively lose out and see just text.
RSS读者实际上会迷失方向，只能看到文字。
- NOTE: There really is no "good" solution for RSS viewers unless your blog engine's RSS Feed Generator does the processing on the server-side for code blocks and sends <span>itis when the feed is requested.
  注意：除非您的博客引擎的RSS Feed Generator在服务器端对代码块进行处理并在请求提要时发送<span> itis，否则，对于RSS查看器确实没有“好的”解决方案。
Once you've inserted code in WLW with PreCode, you can't easily edit the code. I usually edit it outside and paste again.
使用PreCode在WLW中插入代码后，就无法轻松地编辑代码。我通常在外面编辑并再次粘贴。

史蒂夫·邓恩(Steve Dunn)使用Windows的代码格式化程序插件 (Using Code Formatter Plugin for Windows by Steve Dunn)

Another Windows Live Writer plugin is Steve Dunn's Code Formatter. It has a few features that differ from PreCode, and a few quirks (as of the current version). It supports not just Syntax Highlighter style <pre>'s for code but also <span>itis inline styles using ActiPro's SyntaxHighlighter.

另一个Windows Live Writer插件是Steve Dunn的Code Formatter 。它具有与PreCode不同的一些功能，以及一些怪癖(从当前版本开始)。它不仅支持代码的语法突出显示样式<pre>，还支持使用ActiPro的SyntaxHighlighter的内联样式。


    
    
     
      1 using System;
 2 
 3 namespace WindowsGame1
 4 {
 5 #if WINDOWS || XBOX
 6     static class Program
 7     {
 8         /// <summary>
 9         /// The main entry point for the application.
10         /// </summary>
11         static void Main(string[] args)
12         {
13             using (Game1 game = new Game1())
14             {
15                 game.Run();
16             }
17         }
18     }
19 #endif
20 }

You can also insert code as images, which people do, so I mention it here, but I think is rude to blind folks, and not useful as GoogleBing can't see it. Don't do this. You're a bad person.

您也可以将代码作为图像插入，人们也可以这样做，所以我在这里提到，但是我认为这对盲人是无礼的，并且因为GoogleBing无法看到它而没有用。不要这样你真是个坏人

Pros:

优点：

Supports WLW's "Smart Content Editing" so you can edit your code after you insert it.
支持WLW的“智能内容编辑”，因此您可以在插入代码后对其进行编辑。
When using ActiPro
使用ActiPro时
- Looks the same everywhere, RSS or on your site.
  在RSS或您的网站上到处看起来都一样。
- Will always look like this, no need to change anything.
  永远看起来像这样，无需更改任何内容。
When using SyntaxHighlighter
使用SyntaxHighlighter时
- Looks great when users visit your site
  用户访问您的网站时看起来很棒
Supports images (if you're into that kind of thing and you are Satan)
支持图像(如果您喜欢这种东西并且您是撒旦)

Cons:

缺点：

When using ActiPro
使用ActiPro时
- Intense Span-itis and embedded colors.
  强烈的跨度和嵌入颜色。
- Inline styles and colors. Ick.
  内联样式和颜色。 ck
- Stores the formatting in your blog system directly (in the DB, etc)
  将格式直接存储在博客系统中(在数据库等中)
RSS readers effectively lose out and see just text.
RSS读者实际上会迷失方向，只能看到文字。
The plugin inserts unneeded (IMHO) inline styles like width and height.
该插件会插入不需要的(IMHO)内联样式，例如宽度和高度。
Supports images (if you're NOT into that kind of thing or you're blind.)
支持图像(如果您不喜欢这种东西或者您是盲人。)

在GitHub等其他地方托管代码 (Hosting your Code elsewhere like GitHub)

GitHub is a social code hosting and sharing site, and Gist is a part of their site where you can easily share code without logging in. You can create private or public Gists, or you can create your own GitHub login and keep the source you host on your blog in one place.

GitHub是一个社交代码托管和共享站点，Gist是其站点的一部分，您可以在不登录的情况下轻松共享代码。您可以创建私有或公共Gists ，也可以创建自己的GitHub登录名并保留您托管的源代码在您的博客上合而为一。

You can share your code by using embedded JavaScript like this: <script src="http://gist.github.com/516380.js?file=Hanselman%20Sample%201"></script>. You don't get too much control over the look and feel of it, but it "just works."

您可以使用以下嵌入式JavaScript共享代码：<script src =“ http://gist.github.com/516380.js?file=Hanselman%20Sample%201” > </ script>。您对其外观没有太多的控制，但是它“有效”。


       
       
        
        using System;
       
       
       
       
        
        namespace WindowsGame1
       
       
       
       
        
        {
       
       
       
       
        
        #if WINDOWS || XBOX
       
       
       
       
        
            static class Program
       
       
       
       
        
            {
       
       
       
       
        
                /// <summary>
       
       
       
       
        
                /// The main entry point for the application.
       
       
       
       
        
                /// </summary>
       
       
       
       
        
                static void Main(string[] args)
       
       
       
       
        
                {
       
       
       
       
        
                    using (Game1 game = new Game1())
       
       
       
       
        
                    {
       
       
       
       
        
                        game.Run();
       
       
       
       
        
                    }
       
       
       
       
        
                }
       
       
       
       
        
            }
       
       
       
       
        
        #endif
       
       
       
       
        
        }

view raw 查看原始的 Hanselman Sample 1 Hanselman示例1 This Gist brought to you by 该Gist由 GitHub. GitHub带给您。

Pros:

优点：

You can store all your code in an external service, just like you might store all your pictures at Flickr.
您可以将所有代码存储在外部服务中，就像可以将所有图片存储在Flickr上一样。
All your code is in once place.
您所有的代码都放在一个地方。
Dead simple.
死了很简单。

Cons:

缺点：

You're no longer storing your code with your blog posts. You're storing a JavaScript link.
您不再将代码与博客文章一起存储。您正在存储一个JavaScript链接。
You need Javascript running within your RSS reader for the code to show up. Most won't do this for security reasons. Otherwise, you'll see nothing.
您需要在RSS阅读器中运行Javascript，才能显示代码。大多数出于安全原因不会这样做。否则，您什么也看不到。
You can't control it. It's alive!
您无法控制它。它还活着！

结论 (Conclusion)

As with all religious arguments, I don't care who you choose to go with, just that you pick one and be excited about it, and that you know the pros and cons. You can certainly switch back and forth if you like, but I personally believe there's something to be said for consistency, so pick something you can live with for a few years, or your life on earth. ;)

与所有宗教论点一样，我不在乎您选择与谁一起辩论，只是您选择其中一个并对此感到兴奋，并且知道自己的优缺点。当然，如果愿意，也可以来回切换，但是我个人认为要保持一致性，因此请选择可以与您共同生活数年或地球上生活的东西。 ;)

Currently, I'm using PreCode with SyntaxHighlighter until a better solution comes along. Did I miss any good options?

当前，我将PreCode与SyntaxHighlighter结合使用，直到出现更好的解决方案为止。我错过任何好的选择了吗？

翻译自: https://www.hanselman.com/blog/how-to-post-code-to-your-blog-and-other-religious-arguments

cunfuteng7334

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫