简书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ɛ...
    大只若于阅读 10,963评论 0 5
  • 声明!!!! 此文章的代码部分在简书中皆不能正常显示, 请去我的个人网站观看效果, 如果访问不了, 请翻墙试试! ...
    kagenZhao阅读 7,366评论 0 0
  • OverView 概述 Markdown is created by Daring Fireball, the o...
    小林记阅读 13,344评论 6 51
  • Typora的Syntax以此文最好,摘录之。 原文:小林记(http://www.jianshu.com/p/d...
    comma7456阅读 7,469评论 0 2
  • 我来到这个世界22年了。 我开始想写博客。不是生活杂记、流水账、心情琐记。只是想把自己的故事和学习思考的过程记录下...
    Klein_kartoffel阅读 1,475评论 0 0