å¶å°”在日志ä¸åŠ å…¥ä¸€äº›ä»£ç ,感觉完全没必è¦å®‰è£…代ç 高亮æ’ä»Óž¼Œä¸‡ä¸€æŸå¤©ä¸ç”¨æ’äšg了,™åµé¢å¯èƒ½ä¼šå¾ˆä¹±ã€‚其实大部分æ’äšg都是在代ç ä¸å¼ø™¡ŒåŠ å…¥ä¸€äº›æ ‡½{¾ï¼Œç„¶åŽç”¨CSSå®šä¹‰æ ·å¼åQŒé€šè¿‡æŸ¥çœ‹™åµé¢æºæ–‡ä»¶å¯ä»¥æ¸…楚地看到ã€?/p>
有一个嫓å‘芽¾|?#8221;的在¾U¿ä»£ç 高亮è{æ¢ç½‘站。通过在线½E‹åºåŒæ ·æ˜¯å‘代ç ä¸åŠ å…¥ä¸åŒçš„æ ‡ç¾åQŒç„¶åŽå®šä¹‰æ ·å¼ï¼Œå¦‚果感兴‘£å¯ä»¥åˆ°å‘芽¾|‘试试,但毋ơè{æ¢éƒ½éœ€æ‰“å¼€¾|‘倿“作略显éºÈƒ¦åQŒä¸æ˜¯æœ¬½‹‡ä»‹¾lçš„é‡ç‚¹ã€?/p>
今天推è的是一‹Æ¾æœ¬åœ°è{æ¢ä»£ç 高亮显½Cºçš„ž®å·¥å…øP¼šCodeRenderåQŒæœ¬½E‹åºæ˜¯åŸºäº?dp.SyntaxHighlighter 写的代ç è¯æ³•ç€è‰²çš„工具。支æŒçš„è¯è¨€æœ‰ï¼š
java/xml/sql/jscript/css/cpp/c#/python/vb/perl/php/ruby/delphi�/p>
坿–¹ä¾¿ç”¨äºŽä½ çš„åšå®¢ä¸¾_˜è„“代ç åQŒåªè¦è‡ªå®šç›¸åº”çš„æ ·å¼ åQˆhighlight.css 的内容,.Text 支æŒè‡ªå®šä¹‰æ ·å¼æˆ–在模æ‰K‡ŒåŠ ä¸Šè¯æ³•æ ·å¼åQ‰ï¼Œç„¶åŽå¤åˆ¶ç”¨è¿™ä¸ªå·¥å…ïL”Ÿæˆçš„ HTML ä»£ç ž®Þpƒ½è®©ä½ 的代ç ç€é«˜äº®æ˜„¡¤ºã€?å¯ä»¥åŠ å…¥æ›´å¤šè¯ç§çš„æ”¯æŒï¼Œæœ¬ç¨‹åºå°±æ˜¯åœ¨ dp.SyntaxHighlighter 的基¼‹€ä¸Šæ‰©å±•了å¯?Perl è¯è¨€çš„æ”¯æŒï¼Œ¾|‘上å¯ä»¥æ‰‘Öˆ°ç›¸åº”è¯æ³•çš?JS 代ç å’?CSS。è¯a€æ‰©å±•支æŒé€šè¿‡åœ?shCore.js å’?highlight.css åŠ å…¥ç›¸åº”ä»£ç å›_¯ã€?/p>
½E‹åºç•Œé¢
æ“作很容易,Source Code ä¸è„“ä¸Šä½ è¦ç€è‰²çš„代ç åQŒç„¶åŽé€‰æ‹©è¯ç§åQŒç‚¹å‡?Render 按钮ž®×ƒ¼šåœ?HTML Code ä¸ç”Ÿæˆç›¸åº”çš„ HTML 代ç åQŒåŒæ—¶åœ¨ HTML Preview ä¸å¯ä»¥é¢„览到效果ã€?/p>
½Ž€ è¦è¯´æ˜Žï¼šLang 下拉框å¯ä»¥é€‰æ‹©æ‰€æ”¯æŒçš„è¯æ³•,Options 匙¾¹çš?Gutterã€Controlsã€CollapseAllã€FirstLineã€Columns 是控制生æˆçš„é¢å¤–çš„å…ƒç´ ï¼Œé€ä¸€ç‚¹è¯•试就知é“了。æ¯ä¸ªå†…å®ÒŽ˜¾½C?输入)区都æä¾›äº?Copy/Paste/Clear å¿«æ·æ“作链接åQŒè¿˜æœ‰ä¸€ä¸ªæ€Èš„ Clear 按钮ã€?/p>
Copyç”Ÿæˆ çš„HTML 代ç åQŒåœ¨æ—¥å¿—¾~–辑½H—å£åˆ‡æ¢åˆ°HTMLæºä»£ç 编辑模å¼ï¼Œ¾_˜è„“ž®±å¯ä»¥äº†ã€?/p>
ä¸è¿‡è¦æƒ³æ£ç¡®æ˜„¡¤ºä»£ç 高亮˜q˜éœ€åœ¨WordPress主题ä¸åŠ è½½æ ·å¼æ–‡ä»?#8220;highlight.css”åQˆåœ¨ä¸‹è²çš„压¾~©åŒ…ä¸ï¼‰
æ–ÒŽ³•åQ?/p>
首先åQŒæŠŠhighlight.cssä¸Šä¼ åˆ°æ‰€ä½¿ç”¨ä¸»é¢˜ç›®å½•ä¸ï¼›
其次åQ𿉓开header.phpåQŒæŸ¥æ‰¾ï¼š
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" /> |
在åŽé¢æ·»åŠ ï¼š
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/highlight.css" /> |
当然åQŒä½ 也å¯ä»¥å¤åˆ¶highlight.cssä¸çš„æ‰€æœ‰ä»£ç åˆ°ä½ ä¸»é¢˜style.cssä¸ï¼Œä»¥ä¸Šæ¥éª¤ž®±å…了ï¼
å¦‚è®¤ä¸ºé»˜è®¤çš„æ ·å¼ä¸ç¬¦åˆè‡ªå·Þqš„è¦æ±‚åQŒå¯ä»¥é€šè¿‡ä¿®æ”¹“highlight.css”ä¸çš„æ ·å¼æ”¹å˜ä»£ç 高亮ã€è¾¹æ¡†ã€èƒŒæ™¯ç‰é¢œè‰²åQŒæ›´ä¸ªæ€§åŒ–ã€?/p>
ä½†éœ€è¦æ³¨æ„的是WordPress会自动把åŠè§’½W¦å·æ›¿æ¢ä¸ºå…¨è§’,别ähå¤åˆ¶ä¸‹æ¥çš„函æ•îC»£ç æ ‡ç‚ÒŽ˜¯å…¨è§’çš„ï¼Œæ— æ³•ä½¿ç”¨åQŒåˆ‡è®ŽÍ¼
解决办法åQ?/p>
|
效果如下åQ?/strong>
PHP:
CSS: