
要讓數學公式正常的顯示在網頁中一般都是將公式轉成圖片檔再置於內文,如果您的文章內有一大堆數學公式,就會有一大堆圖片,好險陳凱風老師教我一個方法,今天就寫成筆記。
如何讓您的網頁顯示數學公式,支援latex,同場加映如何將圖片轉換成latex
請先瀏覽mathjax.org網站,閱讀一下前人的貢獻,在您的網站中置入<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
然後在您的網頁中貼上latex。就這麼簡單。
示範:
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
結果如下:
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
小提示
上面的範例正常的latex是$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$
,您會發現怎麼不會顯示成數學公式,您需要在latex前後再加上$符號,變成這樣$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
。
如何將數學公式圖片轉換成latex
如果您跟我一樣latex還不熟練,看到一個Word上的數學公式,寫個老半天還是無法寫出正確的latex,那麼下面這個網站mathpix.com就是您的救星。
- 先依照網站指示免費註冊一個帳號。
- 登錄帳號後至這個網址
https://snip.mathpix.com/home
- 將您的數學公式圖片拖拉到畫面中間位置處。
- 完成辨識後,在右上角Code下第一個Text就是我們要的latex,記得上面的提示,前後要加$符號喔!!
在 MathJax 中使用 $ 符號包住 LaTeX 公式是為了讓 MathJax 能夠識別出哪些部分是需要被解析為數學公式的。
這是因為:
- 分隔符號用途 - $ 符號作為分隔符,明確標記出文本中的數學公式部分和普通文本部分
- 語法標準 - 這遵循了 TeX/LaTeX 的標準語法,單個 $ 用於行內公式,兩個 $$ 用於獨立公式
例如:
這是普通文字 $x^2 + y^2 = z^2$ 這是普通文字
如果不加 $ 符號,MathJax 就無法判斷哪些是需要轉換的 LaTeX 公式,哪些是普通文字。
你也可以使用其他分隔符,比如 (...) 或 [...],只要在 MathJax 設定中正確配置即可。但 $ 符號是最常見且標準的用法。
需要注意的是,如果你的文本中本身就需要顯示 $ 符號,你需要用 $ 來轉義,以免被誤認為是公式分隔符。
CONTACT INFORMATION
其他新聞
-
網頁文字排版需要學習的2個CSS標籤writing-mode與text-orientation介紹!
Published on 2025-01-31 21:10:00 -
SEO之前先了解SERP搜尋引擎結果頁!
Published on 2025-01-30 20:00:00 -
網站著陸頁轉換率優化指南:打造高轉換率的終極攻略
Published on 2025-01-28 15:40:00 -
這個免費的 React 圖書館會讓你大吃一驚,徹底改變遊戲規則!
Published on 2025-01-22 15:00:00 -
PHP記憶體優化技巧與實務應用指南:深入解析內建函數運用
Published on 2025-01-21 13:30:00 -
CSS 權重機制完整指南:掌握網頁設計的關鍵
Published on 2025-01-19 18:00:00 -
如何在網頁中使用OpenStreetMap®開放地圖資料並標記您的企業?
Published on 2025-01-08 19:10:00 -
CSS backdrop-filter,用簡單的語法讓您的網站看起來更像專業設計!
Published on 2025-01-06 19:00:00 -
CSS的perspective標籤讓您的網站更活潑,3D應用範例:圖片Z軸翻轉效果
Published on 2025-01-03 00:30:00 -
CX客戶體驗是什麼?
Published on 2025-01-01 19:50:00 -
程式設計師最佳的 AI 工具OpenAI Codex
Published on 2024-12-11 18:10:00 -
YouTube Shorts 影片輕鬆嵌入網頁!超簡單一招搞定
Published on 2024-12-10 18:30:00 -
解鎖您的 ChatGPT 超能力:AI 寫作風格全攻略!
Published on 2024-12-09 11:50:00 -
咖啡店網站設計推薦最新版型
Published on 2024-12-05 15:20:00 -
排名服務:網路行銷的關鍵戰略
Published on 2024-12-04 21:40:00 -
投注站網頁設計,實體投注站也需要網路行銷!
Published on 2024-12-03 11:40:00 -
網站設計師必知:10個最佳Google免費英文字型選擇指南
Published on 2024-11-29 00:20:00 -
網頁開發者工具- 選取網頁中的元素即可檢查功能介紹
Published on 2024-11-28 15:00:00 -
人工智慧革命如何重新定義我們作為設計師的角色
Published on 2024-11-26 14:00:00