如何在 Blog 中使用语法高亮显示

by Richard 6. March 2010 11:11

大家写博客时,常常需要贴出代码,但显示在blog页面上的效果往往很难让人满意(不能语法高亮),习惯了在开发工具中看语法高亮代码的我们肯定也想在blog上看到同样的效果。那如何实现一个代码高亮效果呢?经常上一些技术大牛的博客,发现很多都是用的SyntaxHighlighter语法高亮工具,于是推荐给阿东,由于它不需要与服务器交互,所以安装这个扩展很简单,只需要包含相应css文件,js文件,就可以轻松实现代码高亮。很快,阿东便在APJ的博客上安装了SyntaxHighlighter扩展。

使用SyntaxHighlighter高亮显示代码也非常简单,下面就以实例介绍如何使用syntaxhighlighter语法高亮工具优化你的代码显示,让你和那些大牛一样能在博客上写出"漂亮"的代码。更详细的使用说明可以访问SyntaxHighlighter的网站

首先来看一段javascript代码使用高亮后的效果: 

    /**
     * demo function
     */
    function foo()
    {
        alert('Hello World!');
        // it works!
    }

效果还不错吧。我们来看看是怎么做到的:

第一步,打开一个notepad,在里面贴入要显示的语句,例如上面例子中的:

    /**
     * demo function
     */
    function foo()
    {
        alert('Hello World!');
        // it works!
    }

注:如果你的代码中有“<”(小于号),还要把全部的“<”都替换为“&lt;”,后文会解释原因。

第二步,用一个<pre></pre>把代码包裹起来,并通过pre元素的class来指定要展示的是什么语言。就像:

<pre class="brush: js">

......

</pre>

 注:为了节省篇幅,我们用......代表要显示的代码块。

第三步,从notepad中拷贝上面所有的代码,并粘贴到你想要显示的blog的位置,注意这里要在blog编辑器的HTML模式下进行粘贴。在APJ的博客上可以有两种方式切换到HTML模式:

 方法1是点击“HTML”按钮:

方法2是选中“User raw HTML editor”单选框:

 

现在再来具体解释一下其中的细节:

第一步中,为什么要把“<”替换成“&lt;”呢?上面的步骤中也提到我们最后的代码块加上pre的包装是以HTML的方式放入文章中的,在HTML中“<”代表一个标签的开始,后面的内容就不会正常解释了,要想在HTML中正常显示一个“<”,要用它的转义符“&lt;”。其实大家平时想在网页中多显示几个空格时,就会用到空格的转义符“&nbsp;”,其实是同一个意思。 其实SyntaxHighlighter支持两种方式高亮显示,一个是用我们正在介绍的pre标签来显示,还有一个是用script标签来显示。用script标签可以解决转义的问题,可以免去替换“<”的步骤,它的实现方法是把代码放在“<![CDATA[”和“]]>”中间(点击了解更多)。但是不幸的是我们APJ的博客的编辑器不支持输入“<![CDATA[”和“]]>”,所以只能使用pre的方式,杯具啊!而且我试过,我们用pre的方式,只需要替换“<”,不需要替换“>”,我发现“>”是被自动替换成“&gt;”。那为什么我们不需要替换空格,接着看下面。

第二步中,为什么要用pre标签来显示代码呢?如果直接把代码块放在HTML中,其中的一些空格,回车换行,以及缩进都会被忽略掉,而pre标签元素(preformatted text)是专门用来展现预定义格式(包括空格,回车换行,以及缩进)的标签。

在<pre>标签中可以通过不同的配置,为各种语言做高亮显示,目前SyntaxHighlighter支持二十多中语言高亮显示,我们用的比较多的是: 

语言

配置值(注意全都是小写)

C#

c#, c-sharp, csharp

VB.net/ VB Script

vb

C/ C++

c, cpp

CSS

css

Javascript

js

Java

java

PHP

php

Plain Text

plain, text

SQL

sql

XML/ HTML

xml, xhtml, xslt, html, xhtml

下面再多看几个例子:

SQL ,写法:<pre class="brush: sql">......</pre>

delete from [cqaInterfaceFilter]

insert into [cqaInterfaceFilter]([QualCode] ,[SystemCode])
select [QualCode],'' from cqaQualCode where Substring(Upper(QualCode),1,1) in ('R','S')

HTML:<pre class="brush: html">......</pre>

注:第二行自动换行了,因为一行摆不下,但是行号还是对的。

<?xml  version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

C#:<pre class="brush: c#; highlight: [4, 18]">......</pre>

注:第18行自动换行了

注:如果想要特别突显某行,如下面的第4行和第18行,配置也很简单,就是在pre的class中写上 highlight: [4, 18]

using System;
using System.Web;

namespace Test
{
    /// <summary>
    /// Test class for highlight in blog
    /// </summary>
    public partial class WebForm1 : System.Web.UI.Page
    {
        /// <summary>
        /// Page load event
        /// </summary>
        /// <param name="sender">The sender</param>
        /// <param name="e">The event parameter</param>
        protected void Page_Load(object sender, EventArgs e)
        {
            HttpContext.Current.Response.Write("Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World ");
            HttpContext.Current.Response.End();
        }
    }
}

VB.net:<pre class="brush: vb">......</pre>

Imports System
Imports System.Web

Namespace Test
	''' <summary>
	''' Test class for highlight in blog
	''' </summary>
	Public Partial Class WebForm1
		Inherits System.Web.UI.Page
		''' <summary>
		''' Page load event
		''' </summary>
		''' <param name="sender">The sender</param>
		''' <param name="e">The event parameter</param>
		Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
			HttpContext.Current.Response.Write("Hello World")
			HttpContext.Current.Response.End()
		End Sub
	End Class
End Namespace

CSS:<pre class="brush: css">......</pre>

.syntaxhighlighter {
	width: 99% !important; /* 99% fixes IE8 horizontal scrollbar */
	margin: 1em 0 1em 0 !important;
	padding: 1px !important; /* adds a little border on top and bottom */
	position: relative !important;
}

Java:<pre class="brush: java">......</pre>

/** 
 * The HelloWorldApp class implements an application that
 * simply prints "Hello World!" to standard output.
 */
class HelloWorldApp {
    public static void main(String[] args) {
        System.out.println("Hello World!"); // Display the string.
    }
}

介绍一个小技巧,当你想要拷贝某段代码时,直接从页面上copy,会把行号一起拷贝,如果想只拷贝原始代码,可以把鼠标移到代码块上,代码块的右上角会出现一个工具栏,其中第一个按钮“view source”会弹出一个只包含原始代码块的窗口,再Ctrl+A,Ctrl+C。或者直接点击第二个“copy to clipboard”按钮就拷贝到了剪贴板,不过第二个按钮是用Flash做的,你的机器必须有安装Flash Player才能使用。不过我相信只要有上网,大家都应该装了Flash Player,所以“copy to clipboard”按钮是最方便的拷贝代码方式。

SyntaxHighlighter还可以改变Theme,甚至定制Theme,让代码显示更符合用户自己的需要,看看它提供的另外一个深色背景的Theme吧:

这个黑色背景的看上去也不错,眼睛看着不累,也节能环保。不过Theme不是每个blog用户可以自己改的,这是由admin来管理,一旦修改便会改变所有用户代码显示的样式。如果大多数人都喜欢某个Theme才好叫管理员修改配置。

就介绍这么多,如果想知道更多,可以去访问它的网站。有了这么好的条件,还希望大家多多写博,多来秀秀你的代码。

Tags: ,

General | 使用技巧

使用OCS和Live Meeting共享桌面

by jkeen 4. March 2010 10:39

MTR适用)

  1. 安装MTR正在使用的相同版本 - OCS R1

    安装文件及安装说明位于 \\192.168.0.206\安装工具\Office Communicator 目录

  2. 登录之后使用Live Meeting共享桌面

 

 

 

点击"Conent"à"Share"à"Share Your Desktop"开始和对方进行桌面共享

Tags:

使用技巧

Microsoft Office Communicator自动登录的方法

by Ken 8. January 2010 11:11

Microsoft Office Communicator (以下简称OC)是Microsoft推出的一款即时通讯工具,目前最新版本是2007 R2,MTR计划在1月前全面推广使用OC,用来取代电话、视频会议、网络协作、文件传输等传统应用,目前MTR的各Manager已经安装,并已为APJ几个Team Leader开通了账号。由于使用的账号就是MTR的域用户帐号,所以在APJ 无法自行修改密码,而且密码比较难记,而且默认安装又不提供保存密码和自动登录功能,不过可以通过修改组策略来打开以上功能,具体方法如下:

  1. 从本文附件或者Microsoft网站下载策略模板文件Communicator.adm,保存到windows的inf目录下。
  2. 在开始菜单运行gpedit.msc命令,通过用户配置-管理模板-添加/删除模板,添加Communicator.adm文件。

  3. 找到以下相应的设置进行修改

     4.  重启OC即可见保存密码选项,选上以后即可实现自动登录。

 

由于受License限制,现阶段无法做到每人一个账号,所以只给Team Leader和管理人员开了账号,各Team可以根据实际情况share各自team的账号。

 

Communicator.adm附件:

Communicator.adm (109.97 kb)

Tags:

使用技巧

新同事怎样开始使用《APJ员工天地》?

by jkeen 18. November 2009 10:11

新加入APJ的同事们在从行政人事部获得公司邮箱帐号之后,使用此邮箱发送你的第一篇Blog至 blog@apjcorp.com 即可同时完成《APJ员工天地》的注册和第一篇日志的发布。成功注册之后可以登录blog.apjsoft.com发表评论或发布日志,初始密码为apj,登录之后请进行密码更改。

赶快注册并和大家分享你的知识趣闻吧。

(之前的日志使用公司邮箱发布日志中也有相关介绍)

 

Tags:

使用技巧

怎样查看apjsoft.com站点中的图片

by jkeen 18. November 2009 10:07

使用搜索引擎的图片搜索功能很容易查看整个网站内的图片。

点击:Google图片搜索 或 Bing图片搜索

赶快上传你的私人珍藏照片和同事们分享吧。

Tags:

使用技巧

On AD Security Object Issue

by slevin 6. November 2009 09:57

In recent several projects, our team have dealing with Programming by Active Directory Service Interface more and more frequently than ever, I feel obligated to present the AD Programming to you, just for your reference, or maybe a little helpful. And the basic Active Directory  manipulate code had already in using, which I will not interpret here, I find an interesting stuff happened when I was fixing an issue of a utility for export certain users of certain permission. Here I want to illustrate how the Active Directory Service encapsulating the authorization to every each objects which hold in Active Directory, and how we manipulating the security access could rules in a special programming way.

Actually, the whole passage was an email which sends to Towngas IT Business Solution leader for reference.

Hi, Jason

I got your email, and I know what exactly happened there, I knew this issue going to happen.

Now, let me decipher this issue step by step, and I need you and your AD admin see this.

The answer of this problem is I couldn’t export those person who have the certain permission (here is write/read members) by which inherited the superior, parent or base (something like that) authorize permission, but only the permission granted by AD admin manually.

In the first place I would like to interpret how the AD object organized in ADSI, here especially the Group object in AD: In AD, all the detail of a group object exists as binary, but with architecture as well, So, in a programming way, we exact those binary and reform it to a .NET available object, and this was just ADSI COM provided for us, and we manipulate AD in this way all the time. And the AD Group objects I illustrated like below:

                  

 

 

 

 

 

 

 

 

This Group Object has a particular Security object except those common attributes. And in this Unique Object(each AD group Object got its own security object), it include an ActiveDirectoryAccessRule collection, which include detail security rules, and each ActiveDirectoryAccessRule consist of ‘Ojbect Type’,’IdentityReference’, and other attributes used to describe  certain Rules. Each ActiveDirectoryAccessRule may like this:

                    

The two special attributes I want to emphasize here: Object Type and Identity Reference.

ObjectType is a Guid Object, and Active Directory somehow using this GUID to perform security control and other authentication stuff.

IdentityReference is a String, actual it is a LongonName, which belong to one of the AD objects (Every AD object have a longon Name, right?)

So, we have clear mind right now: the AD using this way to control an AD object permission.

Let’s take it further step interpretation:

In our case, we want to export entire group member with Read/Write members, this is an ActiveDirectoryAccessRule, right?

Actually, I find this rule Ojbect Type is:’ bf9679c0-0de6-11d0-a285-00aa003049e2’, and the Reference is somewhat logonName ‘VSTS\Slevin’(just for example). And by study, the Read/Write Members Object type is a constant value in AD all over the world, no matter where and when, this value never change as long as the AD service is come from the Microsoft. What I pursuit is trying to compare all the ActiveDirectoryAccessRule’s Object Type to filter this constant GUID (bf9679c0-0de6-11d0-a285-00aa003049e2), and get the IdentityReverence relative to the special Read/Write members Object Type.

And by the IdentityReferenct via LogonName, we could retrieve the user’s information easily.

 

OK, now let’s get on our problem. The thing goes like this:

 

1, I create one group named ‘APJ- InheritancePermission’ and another group named ‘APJ- ManullyGrantPermission’ 

 

 

     Now I using my program to exact the ActiveDirectoryAccessRule for two of them

 

 

 

 

The front part is GUID which is Object Type, and the end of each line is the IdentityReference. You may curiosity about what is ‘S-1-5-32-548’ and ‘S-1-5-32-560’, acutally this is a special key for derived permission identity.becasue these two group was not in the root of AD, it derived permission from ‘IT Workstations Admin’ OU.

2, I add someone (Chia Gary C.G.) for security control for the two groups.

 

 

 

And both group grants Read/Write permission to ‘Chia Gary C.G.’ Now let’s see what happened to the access rules of the two group?

 

Here is the result:

 

 

 

 

Well, we can see clearly we grant Read/Write Permission to ‘Chia Gary C.G.’ , but why the Object Type for the user still ‘00000000-0000-0000-0000-000000000000’ ?

It is supposed to be ‘bf9679c0-0de6-11d0-a285-00aa003049e2’, right? Let's put it aside and do the next step.

We open the Advanced Security Settings for APJ- ManullyGrantPermission Group:

 

 

And Edit the Permission Entries for ‘Chia Gary C.G.’ Open the properties tab,  the read member and write member item are perfectly ticked, why the AD Access Rule left Object Type empty(‘00000000-0000-0000-0000-000000000000’)? The answer is: this access rule are derived from the Group level, but here, if we tick out the Read members and write members entries, and tick the two entries back. And now the Access Rule turns to:

 

Then, we can see there are too many access rules there for ‘Chia Gary C.G.’ Here we go, we have ‘bf9679c0-0de6-11d0-a285-00aa003049e2’ Object Type Now!

 

Here is why I can’t export some group member appeared to have Read/Write Members, but actually this permission is grant from Group level ,not the Access Rule level. I only could export the access rule level permission.

 

By reading through this passage, the Group Object inner fabric is only an example for presenting a conceptual model which all the AD object could been have, and the essential information I want spread here is the Security Access Rule, how it contained in an ADSI COM object, what genesis of it come from, how does Active Directory controlled every single object which kept in it. When we start to design our own security object, dose this schema could provide us any fresh idea to make our own model more secure or more easily to control?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Tags:

使用技巧

分享一个很少用却很实用的 元素标签optgroup

by Zed 29. September 2009 13:12

也是才从网上看到的,平时很少看到,不过感觉挺实用的。

定义和用法

<option> 标签定义选项组。

optgroup 元素用于组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。

所有主流浏览器都支持 < optgroup > 标签。

 

实例

通过 <optgroup> 标签把相关的选项组合在一起:

<select>

<optgroup disabled label="Swedish Cars">

<option value ="volvo">Volvo</option>

<option value ="saab">Saab</option>

</optgroup>

 

<optgroup label="German Cars">

<option value ="mercedes">Mercedes</option>

<option value ="audi">Audi</option>

</optgroup>

</select>

运行效果:

 

(此图为FF中,经测试,其他浏览器仅仅效果略有不同)

Tags:

使用技巧

浏览器

by Kimi 18. September 2009 13:12

Kimi Yang

对于现在的web系统开发,千万别只顾着IE6 这个过时了不能再过时的浏览器,应该想想如何兼容当前主流的浏览器。

当下主流的浏览器有这些:

我想大家应该都熟悉这些,只不过Safari知道的人少一些,这个是苹果机器上的浏览器。当然它肯定有For Windows版本了(要不能我怎么可以装上)。其实还有其它一些浏览器,比如遨游,QQ的浏览器,360的浏览器等,这些都是基于IE内核的,所以IE能兼容,这些也都能兼容。

 

那么,我们开发一个Web系统,为了能支持这些浏览器,首先开发的时候尽量用标准的方式,比如标准的HTML,标准的CSS,标准的脚本等。

 

测试的时候呢,尽量能够把这些浏览器都能简单的过一遍。特别是你写了很多脚本的地方,这个特别容易出现浏览器兼容问题。

 

这里还有一个工具可以推荐给大家,Microsoft Expression Studio 3 中,提供了一个工具叫做 Microsoft Expression Web 3 SuperPreview。

看到这个界面,就知道是干什么的吧。 它可以模拟 FireFox(版本根据你机器安装的相关),IE6,IE7,IE8 对网页的渲染情况。

美中不足的是,他只能包含这几种浏览器,比如我的Chrome,Opera等,就不能在这里面应用,据说要等到下个版本才可以。

 

另外,我还发现一个小问题,Google Chrome浏览器,竟然没有大图标显示。我想这个应该要改进一下。

Tags:

使用技巧

复印资料用于传真时,提高辨别质量的办法

by Huangyao 7. July 2009 13:49

在复印时,选择图片复印模式, 再选择自定议浓度调整,中间偏左一或两格, 这样复印出来的资料在传真给对方时,对方收到打印出来的质量会好很多.

Tags:

使用技巧

在Gmail中显示员工天地最新文章

by jkeen 3. July 2009 12:54

可以设置在Gmail显示RSS提示,你使用过吗?

设置方法很简单,点击Gmail的Settings,在Web Clips中输入"Search by topic or URL": http://blog.apjsoft.com,Search

Gmail自动帮你找到rss路径,点击"Add"即可。(默认情况下Gmail帮你加了很多RSS路径,不喜欢可以删除)

Tags:

使用技巧

Copyright © 2009 APJ Software

最新评论

Comment RSS

公告

欢迎使用APJ Blog!

日历

<<  February 2012  >>
MoTuWeThFrSaSu
303112345
6789101112
13141516171819
20212223242526
2728291234
567891011

View posts in large calendar