Blog 板


LINE

分享一個稍微冷門的知識,或許有需求 :P 網誌好讀版:http://note-on-cat.blogspot.co.uk/2013/07/mathjax-blogger.html 前言 MathJax 是近年來網頁技術中,用來顯示數學符號最熱門的方法之一。 以往的解決方法如 MathML 需要瀏覽器的支援,可能因為數學排版複雜又不熱門, 主流瀏覽器中只有 Firefox 支援的最完整,其它如 Chrome、Safari 或是 IE 排版結果遠遜於 TEX 或是 LATEX 的品質; 另一種方式則是直接顯示成圖片,缺點是與內文難以相配, 能夠顯示但不夠優美。而如今 MathJax 的優點,在於只需要 支援 JavaScript 的瀏覽器幾乎都可以正確而且漂亮地顯示(詳情見 MathJax 網頁), 支援 LATEX 的語法,幾乎就像是直接使用 LATEX 一樣。 但因為 MathJax 是一支 JavaScript 程式,必須在網頁讀取完成後再解讀。 使用上不如 MathML 只要輸入 MathML 的語法就能顯示, 需要在網頁中「安裝」MathJax,並不能直接使用。目前網站支援 MathJax 大多為 數學相關的網站,像是討論研究所等級的數學問題的 MathOverflow 或是 維基百科 Wikipedia (需個人賬號登入設定)。而各主流網誌平台中, 多數仍需要稍微修改範本(template)的原始檔才能使用,有些平台 如 Wordpress.com 雖然提供各種不同範本的,但不能修改原始檔就沒辦法了。 幸好,Google 旗下的 Blogger 提供了範本的原始檔修改,幾個簡單的步驟 就能讓 Blogger 使用 MathJax。其他的平台也類似如法炮製即可: 安裝步驟 首先,連結到 Blogger 的網誌主頁,選擇 範本 / 編輯 HTML: 在底下的原始檔中尋找段落由 <head> 開頭以 </head> 為結尾的段落, 在 <head> 下加入底下的原始碼: <script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML' type='text/javascript'> MathJax.Hub.Config({ TeX: { equationNumbers: { autoNumber: "AMS" } }, tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], processEscapes: true }, 'HTML-CSS': { scale: 90 }, displayIndent: '2em' }); </script> 其中兩行指令 inlineMath 跟 displayMath 分別設定 MathJax 要用 什麼樣的文字當作數學段落的開始跟結尾,這裡用的習慣與 LATEX 一致, 用 \$ ... \$ 顯示行內數學;用 \[ ... \] 顯示自成一行的數學。 另外 'HTML-CSS': scale: 90 設定數學顯示大小為原本的 90%, 略小於原本的設定貼近 Blogger 初始字型大小,這點依照各個範本而定。 這樣就大功告成了。接下來可以在自己的文章上測試語法, 例如要顯示 LATEX 只需要在文章中輸入 $\LaTeX$ 若設定正確地 應該就能看到斜體的 LaTeX。 --



※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 78.151.134.42 ※ 編輯: xcycl 來自: 2.98.234.192 (07/22 20:57)
1F:→ BaBi:似乎無法套用至blogger的動態面板 08/01 17:13
2F:推 Wcw5504:Logdown也有原生支援Latex 08/01 20:47







like.gif 您可能會有興趣的文章
icon.png[問題/行為] 貓晚上進房間會不會有憋尿問題
icon.pngRe: [閒聊] 選了錯誤的女孩成為魔法少女 XDDDDDDDDDD
icon.png[正妹] 瑞典 一張
icon.png[心得] EMS高領長版毛衣.墨小樓MC1002
icon.png[分享] 丹龍隔熱紙GE55+33+22
icon.png[問題] 清洗洗衣機
icon.png[尋物] 窗台下的空間
icon.png[閒聊] 双極の女神1 木魔爵
icon.png[售車] 新竹 1997 march 1297cc 白色 四門
icon.png[討論] 能從照片感受到攝影者心情嗎
icon.png[狂賀] 賀賀賀賀 賀!島村卯月!總選舉NO.1
icon.png[難過] 羨慕白皮膚的女生
icon.png閱讀文章
icon.png[黑特]
icon.png[問題] SBK S1安裝於安全帽位置
icon.png[分享] 舊woo100絕版開箱!!
icon.pngRe: [無言] 關於小包衛生紙
icon.png[開箱] E5-2683V3 RX480Strix 快睿C1 簡單測試
icon.png[心得] 蒼の海賊龍 地獄 執行者16PT
icon.png[售車] 1999年Virage iO 1.8EXi
icon.png[心得] 挑戰33 LV10 獅子座pt solo
icon.png[閒聊] 手把手教你不被桶之新手主購教學
icon.png[分享] Civic Type R 量產版官方照無預警流出
icon.png[售車] Golf 4 2.0 銀色 自排
icon.png[出售] Graco提籃汽座(有底座)2000元誠可議
icon.png[問題] 請問補牙材質掉了還能再補嗎?(台中半年內
icon.png[問題] 44th 單曲 生寫竟然都給重複的啊啊!
icon.png[心得] 華南紅卡/icash 核卡
icon.png[問題] 拔牙矯正這樣正常嗎
icon.png[贈送] 老莫高業 初業 102年版
icon.png[情報] 三大行動支付 本季掀戰火
icon.png[寶寶] 博客來Amos水蠟筆5/1特價五折
icon.pngRe: [心得] 新鮮人一些面試分享
icon.png[心得] 蒼の海賊龍 地獄 麒麟25PT
icon.pngRe: [閒聊] (君の名は。雷慎入) 君名二創漫畫翻譯
icon.pngRe: [閒聊] OGN中場影片:失蹤人口局 (英文字幕)
icon.png[問題] 台灣大哥大4G訊號差
icon.png[出售] [全國]全新千尋侘草LED燈, 水草

請輸入看板名稱,例如:Tech_Job站內搜尋

TOP