网页 Markdown 编辑器，但是过于简陋版

讨论分享
1

使用方法

复制下面代码，放到浏览器的地址栏，回车，就酱！

代码

需要联网版（功能强点，代码短点）：

data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%3Ctitle%3EMarkdown%20Editor%3C%2Ftitle%3E%3Cscript%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fmarked%2Fmarked.min.js%22%3E%3C%2Fscript%3E%3Cstyle%3Ebody%7Bmargin%3A0%3Bdisplay%3Aflex%3Bheight%3A100vh%7Dtextarea%2Cdiv%7Bflex%3A1%3Bpadding%3A20px%3Bfont%3A16px%20sans-serif%3Boverflow%3Aauto%7Dtextarea%7Bborder%3Anone%3Bborder-right%3A1px%20solid%20%23ccc%3Boutline%3Anone%3Bresize%3Anone%3Bbackground%3A%23f9f9f9%3Bfont-family%3Amonospace%7D%3C%2Fstyle%3E%3Ctextarea%20id%3D%22t%22%20oninput%3D%22p.innerHTML%3Dmarked.parse%28this.value%29%22%3E%23%20Markdown%20Editor%0A%0AHello%2C%20**World**!%3C%2Ftextarea%3E%3Cdiv%20id%3D%22p%22%3E%3C%2Fdiv%3E%3Cscript%3Ep.innerHTML%3Dmarked.parse%28t.value%29%3C%2Fscript%3E

纯粹离线版（功能弱点，代码长点）：

data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%3Ctitle%3EMD%20Offline%3C%2Ftitle%3E%3Cstyle%3Ebody%7Bmargin%3A0%3Bdisplay%3Aflex%3Bheight%3A100vh%7Dtextarea%2Cdiv%7Bflex%3A1%3Bpadding%3A20px%3Bfont%3A16px%20sans-serif%3Boverflow%3Aauto%7Ddiv%7Bwhite-space%3Apre-wrap%7Dtextarea%7Bborder%3A0%3Bborder-right%3A1px%20solid%20%23ccc%3Boutline%3A0%3Bbackground%3A%23f9f9f9%3Bfont-family%3Amonospace%7Dblockquote%7Bborder-left%3A4px%20solid%20%23ddd%3Bpadding-left%3A1em%3Bcolor%3A%23666%3Bmargin%3A0%7Dcode%7Bbackground%3A%23eee%3Bpadding%3A2px%204px%3Border-radius%3A4px%7D%3C%2Fstyle%3E%3Ctextarea%20id%3D%22t%22%20oninput%3D%22p.innerHTML%3Dm%28this.value%29%22%3E%23%20%E7%BA%AF%E7%A6%BB%E7%BA%BF%20Markdown%0A%0A%E4%B8%8D%E9%9C%80%E8%A6%81%E4%BB%BB%E4%BD%95%E5%A4%96%E9%83%A8%E5%BA%93%EF%BC%8C**%E5%AE%8C%E5%85%A8**%E7%A6%BB%E7%BA%BF%E5%8F%AF%E7%94%A8%EF%BC%81%0A%0A%3E%20%E6%9E%81%E7%AE%80%EF%BC%8C%E4%B8%94%E4%BC%98%E9%9B%85%E3%80%82%0A%0A*%20%E6%94%AF%E6%8C%811-6%E7%BA%A7%E6%A0%87%E9%A2%98%0A*%20%E6%94%AF%E6%8C%81%20**%E7%B2%97%E4%BD%93**%20%E5%92%8C%20*%E6%96%9C%E4%BD%93*%0A*%20%E6%94%AF%E6%8C%81%20%60%E5%86%85%E8%81%94%E4%BB%A3%E7%A0%81%60%0A*%20%E6%94%AF%E6%8C%81%E5%BC%95%E7%94%A8%E5%92%8C%E5%88%97%E8%A1%A8%3C%2Ftextarea%3E%3Cdiv%20id%3D%22p%22%3E%3C%2Fdiv%3E%3Cscript%3Em%3Dv%3D%3Ev.replace%28%2F%3C%2Fg%2C'%26lt%3B'%29.replace%28%2F%5E%28%23%7B1%2C6%7D%29%5Cs%2B%28.*%29%24%2Fgm%2C%28_%2Ch%2Cc%29%3D%3E%60%3Ch%24%7Bh.length%7D%20style%3D%22margin%3A0%200%2010px%22%3E%24%7Bc%7D%3C%2Fh%24%7Bh.length%7D%3E%60%29.replace%28%2F%5C*%5C*%28.*%3F%29%5C*%5C*%2Fg%2C'%3Cb%3E%241%3C%2Fb%3E'%29.replace%28%2F%5C*%28.*%3F%29%5C*%2Fg%2C'%3Ci%3E%241%3C%2Fi%3E'%29.replace%28%2F%60%28.*%3F%29%60%2Fg%2C'%3Ccode%3E%241%3C%2Fcode%3E'%29.replace%28%2F%5E%3E%5Cs%2B%28.*%29%24%2Fgm%2C'%3Cblockquote%3E%241%3C%2Fblockquote%3E'%29.replace%28%2F%5E%5B-%5C*%5D%5Cs%2B%28.*%29%24%2Fgm%2C'%3Cli%20style%3D%22margin-left%3A20px%22%3E%241%3C%2Fli%3E'%29%3Bp.innerHTML%3Dm%28t.value%29%3C%2Fscript%3E

碎碎念

以前这东西有点炫技的意思，也有过好玩的小工具。现在用 AI 写就很简单了。其实还可以优化压缩代码，能更短一点。现在居然还在编辑器里放了预设内容，不过我懒得自己动手改了，就酱，就酱

4 个赞
2

这个在线版是真的厉害，大部分语法都支持。

3

毕竟拉了一整个解析库进来。

1 个赞
4

牛蛙

5

好有创意的用法

6

我记得RunningCheese分享过类似的小书签

7

我有一个常用的书签，修改网站， 点一下就让网站进入可以编辑的模式。

javascript:void(document.body.contentEditable='true');

1 个赞
8

好

9

有点区别，你的是小书签（bookmarklet）我这次用的是数据链接（Data URI）。

  • Bookmarklet 是在当前页面运行的 JavaScript 代码，适合做页面增强、自动化操作。
  • Data URI 是加载任意类型数据的资源，适合嵌入小文件或独立页面，与当前页面隔离。
1 个赞
10

纯文本编辑

data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPmVkaXQgbWU8L2h0bWw+
11

让AI改了一版，加上状态提示、再点一下退出编辑。

javascript:(() => {
    const isEditable = document.body.contentEditable === 'true';
    document.body.contentEditable = !isEditable;
    const tip = document.createElement('div');
    tip.innerText = !isEditable ? '✏️ 网页编辑模式：已开启' : '🔒 网页编辑模式：已关闭';
    tip.style = 'position:fixed; top:10px; left:10px; z-index:99999; background:rgba(0,0,0,0.8); color:#fff; padding:8px 12px; border-radius:5px; font-size:14px; pointer-events:none; font-family:sans-serif;';
    document.body.appendChild(tip);
    setTimeout(() => tip.remove(), 2000);
})();
12

表格木有框线诶， 可以改一下吗

image
image258×164 1.62 KB

image
image206×114 2.26 KB

13

浏览器默认样式，惊不惊喜，意不意外，现代浏览器默认表格边框没有宽度，即无边框

14

数据链接也可以做成书签

15

数据链接 是啥

16

data uri，把数据放在链接里。主帖中的应用是把网页代码放在了链接里。但其实还有很多表现形式，比如常见的把图片放在链接里。