寫在前面
此篇主要參考這裡,
不過之前使用這個方法發表文章時發生一些問題會導致破板,這邊補充一下怎麼解決順便做紀錄
使用
- mrakdown
- prettyprint
設定
在bolgger版面配住中新增"HTML/JavaScript"小工具,然後打上以下代碼
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.7.4/showdown.min.js"></script> <script> var converter = new showdown.Converter(); var posts = document.querySelectorAll(".post-body,.snippet-item"); Array.prototype.forEach.call(posts, function(el, i){ if(el.innerHTML.indexOf("markdown") <= 1){ el.innerHTML = converter.makeHtml(el.innerHTML.replace("markdown","")); } }); var pres = document.querySelectorAll("pre"); Array.prototype.forEach.call(pres, function(el, i){ el.classList.add("prettyprint"); }); </script> <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=default"></script>
好,到這邊就設定完成了,接下來開始編寫文章
編寫文章
- 編輯器切換到html編寫模式
- 編輯code代碼或是超連結使用html encode避免破板
code prettyprint style
- 參考這裡
- 替換上方cdn連結參數?skin=你的選擇
- prettyprint github
一些問題
如果code裡面包含"<",">"這些符號或是印出一些html code可以使用下面的神奇方法來避免
<div>
<pre><code><form action={{ url('webAdmin/calendar/add') }} method="post" enctype="multipart/form-data">
{{ csrf_field() }}
<label for="">選擇一個PDF</label><br>
<input type="file" name="pdfFile" id="file"><br>
<button type="submit">submit</button></div>
</pre></code>