V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
egrcc
V2EX  ›  分享创造

我也做了个 Markdown 编辑器,支持三大平台,已开源

  •  8
     
  •   egrcc ·
    egrcc · 2015-04-14 13:40:35 +08:00 · 9364 次点击
    这是一个创建于 3299 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Mango

    Github地址: https://github.com/egrcc/Mango

    欢迎star,fork。

    介绍

    Mango 是一个专为 Linux 平台而设计的 Markdown 编辑器,同时也支持 Windows 和 Mac OSX。虽然各位大牛已经做了很多 Markdown 编辑器了,但是我在 Linux 平台始终没有找到一款令我满意的 Markdown 编辑器,所以花了一个多星期的时间用 NW.js 实现了 Mango,这里有我写的文章,简要介绍了我实现 Mango 的过程及原理。想自己造轮子的可以看一看,各位大牛请轻喷。

    主要特性

    1. 跨平台支持

    MangoNW.js 驱动,所以天然支持 WindowsMac OS XLinux 三个主流操作系统。由于没有 Mac 设备,所以没有为 Mac 提供下载,只能从源码运行,希望有好心人能帮忙打包。

    2 . 实时预览和同步滚动

    Mango 默认左边是编辑区,右边是预览区。在编辑区的修改会实时显示到预览区,并且编辑区和预览区会同步滚动。当然,可以在菜单Mode里切换显示模式,左边是预览区,右边是编辑区,或者只显示预览区或编辑区。

    3 . 数学公式

    Mango 提供了 MathJax 支持,可以让你方便的用 LaTeX 书写数学公式。行内公式,使用$...$,行间公式,使用$$...$$

    4. 语法高亮

    你可以想下面这样书写程序代码,在右边的预览区代码会高亮显示:

    5. 导出到多种格式

    你可以方便地导出你的文档到 PDF (快捷键: Ctrl + E) 和 HTML (快捷键: Shift + Ctrl + E),并且外观格式跟在 Mango 里看到的几乎一样。

    一些截图

    </br>

    </br>

    </br>

    下载

    如果觉得下载过慢,也可用下面百度云的链接下载:

    下载后解压,双击运行就可以了。

    如果你安装了 NW.js,也可以直接从源代码运行。下载源码后,先用npm install安装一些依赖包。没有mac的包,对mac用户说声抱歉!

    目前 Mango 只是 0.1 版,肯定还有很多不完善的地方,欢迎使用和提供意见。

    第 1 条附言  ·  2015-04-14 15:31:19 +08:00
    补一些图片:









    或者大家点进这里:https://github.com/egrcc/Mango/blob/master/README-zh.md
    第 2 条附言  ·  2015-04-14 15:35:08 +08:00
    数学公式:



    语法高亮:



    下载链接:

    http://pan.baidu.com/s/1pJ3Ie4F
    62 条回复    2015-12-29 11:02:04 +08:00
    laotaitai
        1
    laotaitai  
       2015-04-14 14:01:56 +08:00
    赞! 我点赞是因为知道了个NW.js这个东西.
    ynyounuo
        2
    ynyounuo  
       2015-04-14 14:05:24 +08:00   ❤️ 1
    ……格式荡然无存;
    以后可以从 https://www.v2ex.com/new 这里创建新主题。
    egrcc
        3
    egrcc  
    OP
       2015-04-14 14:08:25 +08:00
    @ynyounuo 我也不知道为什么Markdown没有显示。。。真无奈。。v2还无法删除。。
    icyflash
        4
    icyflash  
       2015-04-14 14:12:21 +08:00
    加上NW,体积忒大了,还不如做成HTML5离线版的
    imeoer
        5
    imeoer  
       2015-04-14 14:13:01 +08:00   ❤️ 1
    linux用户已下载试用,目录选择对话框关闭后界面会白屏,中文输入法切换不出,UI可再改善。linux下一直没发现好用的md工具,期待改进 :)
    egrcc
        6
    egrcc  
    OP
       2015-04-14 14:16:45 +08:00
    @Livid 能否重发一贴?格式太惨了。。。
    egrcc
        7
    egrcc  
    OP
       2015-04-14 14:20:27 +08:00
    @icyflash 体积大确实是个问题
    egrcc
        8
    egrcc  
    OP
       2015-04-14 14:21:01 +08:00
    @imeoer 嗯,多谢提供反馈建议
    lotem
        9
    lotem  
       2015-04-14 14:24:08 +08:00
    有實力呀。蘭州。
    竟然都支持給代碼上色。那麼下一步也會有彩色的 Markdown 代碼對吧。
    egrcc
        10
    egrcc  
    OP
       2015-04-14 14:28:15 +08:00
    @lotem 多谢提供建议啊,争取下一版提供此功能。
    jakiepaper
        11
    jakiepaper  
       2015-04-14 14:38:37 +08:00
    很好,为啥code没highlight啊!!!
    miao
        12
    miao  
       2015-04-14 14:42:02 +08:00   ❤️ 1
    jakiepaper
        13
    jakiepaper  
       2015-04-14 14:50:38 +08:00   ❤️ 1
    能不能加个 'open recent file'?
    因为点进help-mango help之后,之前编辑的文件就消失了,还要重新找放哪了
    jwenwang
        14
    jwenwang  
       2015-04-14 14:53:55 +08:00   ❤️ 1
    欢迎同时分享到 36氪NEXT: http://next.36kr.com/posts
    Septembers
        15
    Septembers  
       2015-04-14 14:54:03 +08:00
    @egrcc 希望能在GitHub Pages部署个在线版的?
    egrcc
        16
    egrcc  
    OP
       2015-04-14 14:54:57 +08:00
    @jakiepaper 嗯,好的,多谢建议
    egrcc
        17
    egrcc  
    OP
       2015-04-14 15:12:37 +08:00
    @jwenwang 感谢,已分享。
    egrcc
        18
    egrcc  
    OP
       2015-04-14 15:13:23 +08:00
    @Septembers 嗯,有时间考虑搞个
    goodbest
        19
    goodbest  
       2015-04-14 16:08:40 +08:00
    NW在mac上耗电才是问题
    learnshare
        20
    learnshare  
       2015-04-14 16:28:38 +08:00
    工具栏太粗暴了吧
    egrcc
        21
    egrcc  
    OP
       2015-04-14 16:35:02 +08:00
    @learnshare 怎么?求改进意见
    TangMonk
        22
    TangMonk  
       2015-04-14 16:41:42 +08:00
    不错!
    wenLiangcan
        23
    wenLiangcan  
       2015-04-14 16:57:26 +08:00
    相比早些年的缺乏,现在都不知道选哪个好了。。。。
    goodbest
        24
    goodbest  
       2015-04-14 17:00:06 +08:00   ❤️ 1
    lz,你先把那个dist目录移出去...
    换个branch或者repo..
    或者用release.. https://help.github.com/articles/creating-releases/

    我clone一下,发现大小快吓死了....
    egrcc
        25
    egrcc  
    OP
       2015-04-14 17:07:11 +08:00
    @goodbest 多谢提醒!正在改进
    wclebb
        26
    wclebb  
       2015-04-14 17:22:49 +08:00   ❤️ 1
    @egrcc 简直简单粗暴了,应该尽量半透明的灰色字体隐藏式显示。我一看到上面粗大的标志就不想试用了……
    goodbest
        27
    goodbest  
       2015-04-14 17:32:49 +08:00   ❤️ 1
    话说我来给lz报一个bug吧,mac上快捷键不能用 ,复制粘贴都不行啦
    bibizhang
        28
    bibizhang  
       2015-04-14 17:35:08 +08:00   ❤️ 1
    加油~另外上面的图标有点干扰,建议不要用太刺眼的颜色
    egrcc
        29
    egrcc  
    OP
       2015-04-14 17:41:18 +08:00
    @wclebb
    @bibizhang 多谢建议,下次争取改进UI
    egrcc
        30
    egrcc  
    OP
       2015-04-14 17:44:59 +08:00
    @goodbest 抱歉啊,mac 上没有进行测试。因为快捷键很多都是直接绑定 ctrl 键的,mac上不能用command 代替吗?对mac不太熟悉。
    learnshare
        31
    learnshare  
       2015-04-14 17:46:07 +08:00   ❤️ 1
    @egrcc 如上面两位所说,图表尽量纯色、小、简单一些。那不是主要功能,不要太捕捉视线
    Livid
        32
    Livid  
    MOD
       2015-04-14 18:51:00 +08:00   ❤️ 1
    V2EX 是支持 Markdown 发帖及预览的,请使用这个发帖接口:

    https://www.v2ex.com/new

    这个帖子已经为你打开 Markdown 显示。
    exuxu
        33
    exuxu  
       2015-04-14 18:55:59 +08:00
    在用remarkable ,功能比你的多一点
    KexyBiscuit
        34
    KexyBiscuit  
       2015-04-14 18:58:52 +08:00 via Android
    已 Star
    egrcc
        35
    egrcc  
    OP
       2015-04-14 18:59:35 +08:00
    @Livid 多谢,太感动了
    egrcc
        36
    egrcc  
    OP
       2015-04-14 19:00:56 +08:00
    @exuxu remarkable我之前也用过,不过我这里它的中文显示简直太惨了,除非自定义css,不过每次打开都得重新自定义。
    Biwood
        37
    Biwood  
       2015-04-14 19:03:14 +08:00
    好东西,我正在找这个,不知道有没有跟Evernote和github pages的api对接上,如果可以的话就更好了
    huzheyi
        38
    huzheyi  
       2015-04-14 19:40:16 +08:00 via Android
    看起来不错,是否能取代mou呢……
    reeco
        39
    reeco  
       2015-04-14 20:34:05 +08:00 via iPhone
    已感谢
    egrcc
        40
    egrcc  
    OP
       2015-04-14 20:57:01 +08:00
    @KexyBiscuit @reeco 多谢支持

    @Biwood 嗯,正在考虑跟一些云服务对接
    kiray
        41
    kiray  
       2015-04-14 21:49:57 +08:00
    为什么Mac没有下载链接
    egrcc
        42
    egrcc  
    OP
       2015-04-14 22:27:26 +08:00
    @kiray 抱歉啊,我没有 mac 设备,所以无法为mac提供下载。你可以试试从源码运行,需要先安装nw.js
    empilot
        43
    empilot  
       2015-04-14 23:26:08 +08:00
    Wow, 久违了的麦克斯韦方程组。
    Cool!
    IwfWcf
        44
    IwfWcf  
       2015-04-14 23:30:18 +08:00
    为什么最近突然多了那么多 Markdown Editor?
    xcv58
        45
    xcv58  
       2015-04-14 23:39:42 +08:00
    git 历史记录里太大了吧,377MB
    Yvette
        46
    Yvette  
       2015-04-15 08:47:55 +08:00
    不会打包啊……哪位同学随手分享个Mac包吧~另外,有自动更新不?
    jakiepaper
        47
    jakiepaper  
       2015-04-15 09:54:49 +08:00
    在Linux下适用了一天,很喜欢。
    再提点意见:‘眼睛’那个图标有点太别扭了,还有‘后退’的颜色是不是太刺眼了?。
    然后再问一下,支持预览LaTex文件吗?要是有这个功能就太好了
    railgun
        48
    railgun  
       2015-04-15 09:55:27 +08:00
    感觉那几个按钮图标太大,太花……
    egrcc
        49
    egrcc  
    OP
       2015-04-15 11:24:47 +08:00
    @xcv58 因为曾经把一些供下载的包也放到这个项目了,所以就变大了,现在已经移出去了

    @Yvette 内有检查更新

    @jakiepaper LaTeX文件难以支持,这只是 md 编辑器。。。不过想法倒是很好啊,目前貌似没有latex实时预览的工具

    @jakiepaper @railgun 图标的问题下次会改善
    Biwood
        50
    Biwood  
       2015-04-15 11:25:46 +08:00
    同吐槽一下图标,在win8平台上用1080p的屏幕看,有点模糊,而且这种图标虽然符合扁平化潮流,但是没有质感,建议改进
    dwztom
        51
    dwztom  
       2015-04-15 12:52:36 +08:00
    能放到markdown的节点下吗 ?
    JamesRuan
        52
    JamesRuan  
       2015-04-15 19:30:07 +08:00
    似乎代码高亮和数学公式都是特殊需求人士喜欢加的东西。

    当时在考虑论坛标记语言的时候,原来也是想用Markdown的。但是考虑的Markedown的Parser实现比较复杂,编辑器实在太多、太杂,如果考虑到项目的可维护性,这部分成本太大了。而小白用户离开编辑器又写不了Markdown……

    所以就自己定义了一个很容易实现Parser,又很容易做编辑器,同时满足代码高亮和数学公式的新的标记语言,整合在前端库Ebony里面了。https://github.com/cc98-frontend-development/ebony

    喜欢造轮子的可以来观摩一下哦。
    secondwtq
        53
    secondwtq  
       2015-04-16 10:24:18 +08:00   ❤️ 1
    @JamesRuan “似乎代码高亮和数学公式都是特殊需求人士喜欢加的东西。”

    并不这么觉得。我感觉 Markdown 本身很大程度上就是面向程序员的,或者说程序员对于 Markdown 来说并不算“特殊群体”。并且有很多人在用一种东西叫 GitHub Flavored Markdown。

    至于 MathJax 的支持,作为一个学生党,我写作业时有用到。还有看到现在许多 blog 里面插的 bitmap 公式,排版乱,并且分辨率很渣,视觉效果很差。如果这些都能用矢量的方式来做,既好看,也方便编辑,我不觉得这样的需求有多“特殊”。
    kongwy
        54
    kongwy  
       2015-04-17 11:37:01 +08:00
    又是一个左编辑右预览的,感觉编辑文字的大多数时候并不需要预览功能。
    将预览去掉或者默认关闭然后加一些针对 Markdown 的显示如何?

    像 Mou 的左侧栏那样?
    egrcc
        55
    egrcc  
    OP
       2015-04-17 11:57:53 +08:00
    @kongwy 是可以在菜单栏把预览关闭的,不过是否默认关闭,这个不同的人有不同的意见吧。下次考虑加一个设置项。
    kongwy
        56
    kongwy  
       2015-04-17 13:24:17 +08:00
    @egrcc 还有最好能针对 Markdown 本身做一些高亮特殊显示。

    比方 "# 标题一" 本身就按一级标题样式显示,"**加粗**" 也直接在编辑区加粗显示。
    JamesRuan
        57
    JamesRuan  
       2015-04-17 20:57:48 +08:00
    @secondwtq markdown 还真不是给程序员设计的…… LaTeX那种标记方法才更程序员,而LaTeX的数学公式一直很强大。
    secondwtq
        58
    secondwtq  
       2015-04-18 01:52:09 +08:00
    @JamesRuan 我知道,所以我在措辞上留了余地。

    事实是,Markdown 就算本身不是面向 developer 的,现在也在这个圈子里得到了广泛的应用。

    无心插柳也好,有意为之也罢。我认为 Markdown 易学、易写、易读的特性使其比 LaTeX 更适合程序员。注意这里是“适合”,因为比较的并不是哪个更 Geek,而是更适于日常使用。

    至于 LaTeX,我也喜欢用,但是这东西在我的印象中一直是一个“官腔”的形象,我认为这和开发者注重所谓“创造力”的工作是相悖的。我并不反感 LaTeX,我真正反感的是 Word。
    weichuangye
        59
    weichuangye  
       2015-12-29 00:10:11 +08:00
    牛啊
    喜欢这样的前辈
    egrcc
        60
    egrcc  
    OP
       2015-12-29 00:28:14 +08:00
    @weichuangye 前辈不敢当,目前也还是学生。不过这贴都这么久了,没想到还有人来
    weichuangye
        61
    weichuangye  
       2015-12-29 09:10:55 +08:00
    @egrcc 晕,你还是学生?这不太可能吧?在哪儿上学呢
    egrcc
        62
    egrcc  
    OP
       2015-12-29 11:02:04 +08:00 via Android
    @weichuangye 怎么不可能了。。。目前复旦数院大四
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3238 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 13:54 · PVG 21:54 · LAX 06:54 · JFK 09:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.