爱意满满的作品展示区。
laobubu

这大概是“所见即所得”Markdown 吧( V2EX 上也能用 )

  •  3
     
  •   laobubu ·
    laobubu · Feb 7, 2017 · 10985 views
    This topic created in 3559 days ago, the information mentioned may be changed or developed.

    在网页上(包括 V2EX )也能实现所见即所得 Markdown !

    output.gif

    昨天下午看见有一个帖子 有什么好用的 markdown 的所见即所得编辑器,大多数推荐的是 Typora (应用程序)、 VSCode 和各种网页端左右对照的玩意儿(虽然严格地说不是 WYSIWYG Markdown )。

    我去年年底开了一个新坑,做的也是所见即所得Markdown 。

    不知道有没有人还记得我的那只 MarkdownIME。但是那个玩意儿其实是输入法来着的,输出的直接是 HTML ,不是 Markdown 。然而现实情况中好像更需要 Markdown <=> 结果 这种方式。

    所见即所得 Markdown

    logo

    这个新坑 HyperMD 能够在网页端实现真的所见即所得 Markdown ,而且还能够自由在 Markdown 和预览之间切换(见在线体验页面)。

    在线体验、源码

    [^1]: 不是前端圈子的我应该只会在 V2EX 上发布一下这玩意儿了。

    功能

    功能包括但不限于:

    1. 在同一个输入框实时写作和预览 Markdown
      • 粗体, 斜体, ~~删除线~~, Code
      • 链接, 图像, 脚注
      • 代码块、引用块、标题
      • 列表(有序,无序,嵌套, TO-DO 勾选框)
      • MathJax 公式,包括 行内公式 和 公式块(使用 $ 或 $$ 包围)
    2. Alt+Click 以跟踪链接和脚注
    3. 语法高亮 支持超过 120 种语言的代码块
    4. 鼠标悬停 以阅读脚注信息
    5. 可复用大量的 CodeMirror 代码、扩展程序 以及一些主题。

    在 V2EX 发布主题界面的演示

    打开发帖界面,在地址栏输入

    javascript:void($.getScript('https://goo.gl/MvrjGQ'))
    

    然后回车,等几秒钟就 ok 了。把这个地址保存为书签( Bookmarklet )使用更佳。

    47 replies  •  2019-01-09 16:58:41 +08:00
    nolo
    nolo
    Feb 7, 2017
    1
    支持 你要不要做个国内镜像?
    ynyounuo
    ynyounuo
    Feb 7, 2017
    2
    非常好用
    laobubu
    laobubu
    OP
    Feb 7, 2017
    3
    r#1 @nolo 有国内镜像加速想必是极好的 (●'◡'●)
    但是现在还不是正式版,还有一堆未测试出来的 bug ,不知道合不合适 =v=
    plqws
    plqws
    Feb 7, 2017
    4
    真的很不错,支持一下
    yangff
    yangff
    Feb 7, 2017
    5
    很棒!
    goldenlove
    goldenlove
    Feb 7, 2017
    6
    满有意思的,已 star....
    装过 Typora 但没能适应,感觉这个可以包装成客户端,再支持导出 pdf 啥的~
    TheKiteRunner
    TheKiteRunner
    Feb 7, 2017
    7
    你好,看到网页端使用所见即所得 markdown 渲染被吸引了。但是在地址栏中输入“ javascript:$.getScript('https://goo.gl/MvrjGQ ”,却成了百度搜索该内容
    fy
    fy
    Feb 7, 2017
    8
    simplemde
    loading
    loading
    Feb 7, 2017 via Android
    9
    其实如果 V2EX 可以为充值用户提供一个载入自定义 js 就更好了。
    hack
    hack
    Feb 7, 2017
    10
    @loading 抓些 cookie 啥的是么
    loading
    loading
    Feb 7, 2017 via Android
    11
    @hack 不,这样就不用装猴子脚本了。很多事都能做。
    loading
    loading
    Feb 7, 2017 via Android
    12
    @hack 自定义 js 只给自己加载,抓 cookie 自己用浏览器就能抓,你可能想错了。
    ooTwToo
    ooTwToo
    Feb 7, 2017❤️1
    13
    @TheKiteRunner Chrome 粘贴的时候会忽略 [javascript:] ,仔细检查下地址栏?
    AsherG
    AsherG
    Feb 7, 2017
    14
    @Livid 站长不知有没有更好的想法
    laobubu
    laobubu
    OP
    Feb 7, 2017 via Android❤️1
    15
    @TheKiteRunner 你可能是国产浏览器的受害者。试试看保存成书签之后,用书签启用 HyperMD
    FinnBai
    FinnBai
    Feb 7, 2017
    16
    看起来很棒! 已 star
    freestyleyoo
    freestyleyoo
    Feb 7, 2017
    17
    地址栏是哪里呀,能不能说清楚一点,我把它当成了浏览器的地址结果悲剧了,,萌新不懂啊
    freestyleyoo
    freestyleyoo
    Feb 7, 2017
    18
    @freestyleyoo w 错了 原来是 javascript:没复制到
    yangxiongguo
    yangxiongguo
    Feb 7, 2017
    19
    厉害!!
    laobubu
    laobubu
    OP
    Feb 7, 2017 via Android
    20
    @fy 再套一个外壳,加工具栏,预览侧栏,还有快捷键,查找替换功能,就可以秒 SimpleMDE 了大概 ( ゜ω゜)

    当然如果有雅致的话可以把 HyperMD 和 SimpleMDE 弄到一起试试
    xcatliu
    xcatliu
    Feb 7, 2017 via iPhone
    21
    CodeMirrow 的唯一缺点就是 iPhone Safari 里面输入不了中文,哎
    phithon
    phithon
    Feb 7, 2017
    22
    支持~
    veightz
    veightz
    Feb 7, 2017
    23
    好评, 类似 Typora
    lydasia
    lydasia
    Feb 7, 2017
    24
    好用!
    mingyun
    mingyun
    Feb 7, 2017
    25
    赞
    jininij
    jininij
    Feb 7, 2017 via Android
    26
    在 Chrome 等浏览器地址栏粘贴 javascript: 开头的内容时,会被和谐掉。保护小白的安全机制。
    HLT
    HLT
    Feb 7, 2017
    27
    so cool
    :bowtie:
    Kilerd
    Kilerd
    Feb 8, 2017 via iPhone
    28
    很早之前就想这么干了,奈何 js 技术上不去,所以没动手。
    这次终于不用自己动手了。 nice
    agtc
    agtc
    Feb 8, 2017
    29
    great!
    TheKiteRunner
    TheKiteRunner
    Feb 8, 2017
    30
    @laobubu 你好,确实是“ javascript:”丢失,用书签解决了。

    不知道目前除了 V2EX 还适用于哪些场景,我在印象笔记编辑界面里尝试不能成功,用 markdown here 插件可以渲染。方片收集的 chrome 端编辑界面也不可以。
    designer
    designer
    Feb 8, 2017 via iPad
    31
    很棒,就是 logo 有点不行
    laobubu
    laobubu
    OP
    Feb 8, 2017 via Android❤️1
    32
    r #30 @TheKiteRunner 那个脚本只考虑了 V2EX 啊…而且这个并不是 Markdown-it 那种性质的玩意。这个只是个 Markdown 编辑器,预览输出的效果全都是泡沫,实际所得的内容仍然是 Markdown 纯文本。

    倒是你可以试试我的 MarkdownIME ,也许能用(吧)

    r#31 @designer Logo 是拿 Flash 随便搞的,不会设计😂
    TheKiteRunner
    TheKiteRunner
    Feb 8, 2017
    33
    @laobubu 印象笔记试了一下 IME ,回车时多出很多个空行,体验效果没有 markdow here 好~方片收集的编辑器, IME 和 markdown here 都无法起作用。
    antowa
    antowa
    Feb 8, 2017
    34
    图床怎么解决?
    ljcarsenal
    ljcarsenal
    Feb 8, 2017
    35
    厉害
    Chaos11
    Chaos11
    Feb 8, 2017
    36
    cool!
    laobubu
    laobubu
    OP
    Feb 8, 2017 via Android
    37
    @antowa 等过后什么时候怼一个粘贴上传图片的玩意试试看了…现在先手动上传图片然后插入吧…
    spice630
    spice630
    Feb 10, 2017
    38
    @laobubu
    需要赞助存储不,连我这个很挑剔的人都觉得这东西很赞
    spice630
    spice630
    Feb 10, 2017
    39
    @laobubu
    不支持 golang 的高亮?
    laobubu
    laobubu
    OP
    Feb 10, 2017
    40
    r#39 @spice630
    支持 golang 高亮的,但是因为流量,和载入速度的问题,我的那个 demo 里只启用了 xml 、 html 、 js 等几个语言。

    已经在 demo 页面底部添加了一个载入其他语言的功能,但是要先载入,才能开始写。

    至于存储,暂时没想那么远,谢谢啦…… 目前这个情况,能有更多人知道 / 有人帮忙一起开发,或者帮我买杯咖啡就不错了。
    uzumaki
    uzumaki
    Feb 11, 2017 via Android
    41
    支持一下
    blueset
    blueset
    Feb 13, 2017 via Android
    42
    赞一个!
    qq234il
    qq234il
    Feb 22, 2017
    43
    好赞,个人觉得鼠标 hovor 上去的时候变 markdown 格式会更方便,不知道这个提议如何
    laobubu
    laobubu
    OP
    Feb 22, 2017
    44
    r#43 @qq234il 额,不能脑补出来…… 感觉那样子意义不大吧。
    aleung
    aleung
    Feb 23, 2017
    45
    效果不错,有点像 Typora 。不知道有没有可能做成浏览器插件或者油猴脚本,支持所有接受 markdown 输入的网站输入框?
    laobubu
    laobubu
    OP
    Feb 23, 2017
    46
    r#45 @aleung 完全可行
    shanlan
    shanlan
    Jan 9, 2019
    47
    ~~深圳~~
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   862 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 79ms · UTC 21:10 · PVG 05:10 · LAX 13:10 · JFK 16:10
    ♥ Do have faith in what you're doing.