關於博客園的在線演示

　　在博客園發表文章，有時候就須要在線演示，demo演示，但是博客園又不能託管html文件。

　　不少人也想了很多的方法，下面是個人實現方法。

　　我也有看過其餘博友的文章，是將代碼寫在textarea裏，而後用js來實現。只是在預覽後咱們會發現，博客園將style標籤裏的內容屏蔽了，或者說，style標籤裏的樣式，用在了整篇文章的版面。

 　　看看我剛作的demo：http://www.cnblogs.com/xumengxuan/p/3362886.html

　　我在用谷歌進行搜索的時候，發現有一位博友的文章：除了代碼演示，其餘任何的標籤都沒有，可是右鍵查看源代碼的話，發現博客園全部默認的html標籤都還在，也就是說，該博友將標籤隱藏了，專門用這篇文章來作demo。因而，我也就沿着這個思路進行設計。

　　固然，在進行以前，咱們須要解決一個問題，就是博客園會錯誤地引用textarea中的style標籤，這裏個人解決方案是：更改博客園的默認編輯器爲文本編輯器，咱們不讓博客園提供任何的html代碼，咱們本身來編輯咱們須要的html代碼。

　　而後把沒必要要的標籤隱藏，將代碼放到textarea中，

　　<style type="text/css">

　　*{display:none;}

　　</style>

　　<textarea id="cnblogsShowCode">

　　<!-- 放置你的html代碼 -->

　　</textarea>

　　再添加一段js代碼來獲取textarea中的內容，並在本頁面中打開，js代碼以下：

　　

<script type="text/javascript">
$(function(){
     var winname = window.open('', "_self", '');

        var content = document.getElementById("cnblogsShowCode").value;

        winname.document.open('text/html', 'replace');

        winname.opener = null

        winname.document.writeln(content);

        winname.document.close();
})        
</script>

　　固然，使用這種方法，也是能夠不用隱藏沒必要要的標籤。只是我發現，若是不隱藏的話，打開這個頁面時，會首先顯示出原來的內容，而後才顯示你要演示的代碼。給人一種被替換的感受。因此，仍是將博客園默認的html標籤隱藏了比較好。

　　這裏還存在着一個問題：若是要執行的代碼裏也存在textarea標籤，那麼就會出現沒必要要的麻煩。<textarea id="cnblogsShowCode">會與第一次出現的</textarea>進行匹配，後面的代碼都會忽略掉。這裏的解決方案是：把代碼裏的</textarea>兩邊的尖括號改爲用html代碼代替，"<"寫成"&gt"， ">"寫成"&lt"，注意是代碼裏的標籤，而不是最外層的</textarea>標籤。