Pages

0

筆記 - SyntaxHighlighter(2)

會使用 SyntaxHighlighter 固然是讓我很開心的一件事，
但是和 1.5.1 比較之後卻發現 3.0.83 這個版本存在幾個缺失，
其中之一是沒有辦法直接秀出不具任何格式的完整程式碼，
這也是像我這種寬度較窄的網頁所必需要的功能，
不然就會出現惱人的水平卷軸，
其中之二是在套用 css 的過程會出現短暫的"無樣式"延遲時間，
因此這篇再來做個筆記，
記錄一下我是如何修改的避免以後我自己忘掉...
在這之前要先了解一些基本 javascript 的語法，
也就是 window.open 以及回傳值，
這個做法可以將網頁的內容做為新開視窗頁面的內容，
就可以單獨顯示出程式碼，
語法如下：

$(function(){
 $("pre").wrap("<div class='CodeSourceBox'></div>"); 
 //因為syntaxhighlighter自身寫法的緣故
 //無法直接用jquery對pre作用
 //所以在pre標籤外包覆一個div
 //而再利用jquery對此div進行作用
 
 $(".showcode_div").prepend("<div class='viewShowCodeSource'>view source</div>"); 
 //增加一個按鈕，點選之後開啟新的視窗
 //之所以不直接寫在網頁裡
 //目的就是讓全部的樣式都可以統一
 //不用一頁一頁進去改
 
 $(".viewShowCodeSource").live("click",ShowCodeSource201204);
 function ShowCodeSource201204(){
  var kkk = $(this).parent("div").find(".CodeSourceBox").html();
  //找.viewShowCodeSource父階層內名為.CodeSourceBox的div
  //並將此div的內容定義為kkk

  var object = window.open('','new','width=750, height=400, location=0, resizable=1, menubar=0, scrollbars=1'); 
  //定義一個window.open物件

  object.document.write("\<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script\>"+kkk+"\<script>$('.gutter').css({'display':'none'});$('.toolbar').css({'display':'none'});</script\>");
  //將kkk回傳到onject當中
  //使其開啟的跳出網頁內容為kkk
  //但因為kkk包含了syntaxhighlighter所套用的的一些格式(如table和td...等)
  //所以在跳出的網頁套用jquery將某些格式隱藏
}

而原本的 pre 標籤外，
則必須手動新增一個具有屬性 position:relative 的 div，
做為按鈕定位之用途，

<div class="showcode_div" style=" position:relative;">
 <pre class="brush:as3">
 </pre>
</div>

最後新增 .viewShowCodeSource 這個 div 按鈕的 css，
就完成了將彈出式視窗顯示程式碼的功能。

div.viewShowCodeSource
{
  -webkit-text-size-adjust:none;
  font-family:Arial; 
  color:#333;
  background-color:#ccc; 
  font-size:9px; 
  cursor:pointer; 
  position:absolute;
  left:375px; 
  top:-15px; 
  line-height:14px;
  padding:0 5px; 
  z-index:1000;
}
div.viewShowCodeSource:hover
{
  color:#fff; background-color:#999;
}

如此就處理完成了第一個問題，
「沒有辦法直接秀出不具任何格式的完整程式碼」，
而第二個問題「短暫的"無樣式"延遲時間」，
我則採用了一個 loading bar 的圖片，
先隱藏無樣式的程式碼，
等待網頁載入完成後(所有內容、程式、圖片與樣式)，
才將 loading bar 去除，
如此便可以呈現套用完成樣式的區塊，
也不會有切換的時間差以及閃動狀況發生。

div.showcode_div pre
{
  display:none;
}
  div.showcode_div 
{
  width:435px; 
  height:50px; 
  padding:0 ; 
  border:1px solid #bbb;  
  display:table; 
  background:url(loading圖片) 200px 10px no-repeat; 
  z-index:999;
}

原本理當在 jquery 中對 pre 下達載入完成後秀出的指令，
但因為測試後發現套用完成樣式 pre 會自動秀出，
(因為樣式內加入了 !important 的指令)，
所以在此就算沒有使用 jquery 下達指令，
pre 在套用完成樣式後也會自動秀出，
並將 .showcode_div 的背景蓋住，
因此甚至連 .showcode_div 的背景都不用額外去寫指令使其消失。

就這樣，
終於完成了在網頁中顯示與美化程式碼的工程，
耶!!!!

oxxo

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

沒有留言:

張貼留言