簡書Markdown編輯器改進

簡書不直接支持數學公式,這十分遺憾。在開發人員反應過來之前大概柯南都要結局了,既然自己有能力解決,那就開干了。

我預想是這樣的,塊級公式用帶tex類的代碼塊:

```tex
e^{ix} = \cos x + i\sin x
```
e^{ix} = \cos x + i\sin x

然后在普通內聯公式呢,就用下面的辦法來實現 $\lim_{x\rightarrow 0} \frac{sin x}x$,所有由 $ 包裹的代碼都將被當作Latex代碼,為了防止跟其它代碼混淆,規定 $ 跟 ` 之間不能有空格

`$\lim_{x\rightarrow 0} \frac{sin x}x$`
理想的效果圖

方法

在Firefox的Greasemonkey或者Chrome的TamperMonkey中添加這一段UserScript:

// ==UserScript==
// @name        jianshu-extension
// @namespace   your-namespace
// @include     http://*.jianshu.com/*
// @version     1
// @grant       none
// ==/UserScript==

var base_url = "http://latex.codecogs.com/gif.latex?";

function replaceLatex() {
  $('.preview code.tex').each(function () {
    var pre = $(this).parent("pre");
    var latex = $(this).text();
    var url = base_url + encodeURI(latex);

    pre.replaceWith('<img src="'+url+'" alt="'+latex+'" '+
        'style="display: block; margin: 20px; margin-left: auto; margin-right: auto;" />');
  });
  
  $('.preview code').each(function() {
    var latex = $(this).text().match(/^\$(.+)\$$/);
    if(!latex) return; else latex = latex[1];
    var url = base_url + encodeURI(latex);
    $(this).replaceWith('');
  });
  
  $('.main textarea.text')
      .css("font-family", '"courier"')
      .css("line-height", "18px")
      .css("font-size", "14px");
}

setInterval(replaceLatex, 1000);

如果沒有辦法安裝這個代碼,直接按F12打開調試器把代碼貼進去也可以。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • $ \LaTeX{} $歷史 $\LaTeX{}$(/?lɑ?t?x/,常被讀作/?lɑ?t?k/或/?le?t?...
    大只若于閱讀 5,631評論 0 5
  • 聲明!!!! 此文章的代碼部分在簡書中皆不能正常顯示, 請去我的個人網站觀看效果, 如果訪問不了, 請翻墻試試! ...
    kagenZhao閱讀 2,568評論 0 0
  • OverView 概述 Markdown is created by Daring Fireball, the o...
    小林記閱讀 9,904評論 6 51
  • Typora的Syntax以此文最好,摘錄之。 原文:小林記(http://www.lxweimin.com/p/d...
    comma7456閱讀 2,664評論 0 2
  • 我來到這個世界22年了。 我開始想寫博客。不是生活雜記、流水賬、心情瑣記。只是想把自己的故事和學習思考的過程記錄下...
    Klein_kartoffel閱讀 210評論 0 0