Nodejs 菜鸟练手： Markdown 编辑器

发布于 1周前 作者 sinazl 来自 nodejs/Nestjs

Nodejs 菜鸟练手： Markdown 编辑器

WEB 菜鸟一枚，做了 10 年程序最近对 WEB 感兴趣，就又拿了起来，发现和 10 年前根本不是一回事，只能从头入门。 周末憋出一个粗鄙的 MD 编辑器，使用国 node.js vue vue-strap vue-markdown 。

在学习过程中被 vue-strap 虐了千百遍， google 居然没有完整入门实例，官网居然也没有完整实例。官网提供的片断代码根本不足以让新手快速起步，你在逗我...

于是把这个编辑器上传到 GIT HUB ，给新手做个完整入门实例。

整个项目水平用之前一位 V2EXER 的话来说就是“把官网的例子打了个包”（笑 所以大神就不要在这个项目上浪费时间。

项目地址，欢迎 star https://github.com/k9982874/strap-markdown/tree/master


Harmonyos Next教程
24 回复

vue-strap 坑太多，好像没人管了吧


不是， V2EX 刚发的帖子就这样，没什么人，过段时间或许就好了
强迫症认为不是 GIT HUB ，而是 github
github 地址贴出来不要贴 branch 地址


github 输入法纠错的锅（逃
git 地址粘的时候没注意，感谢提醒

建议先把自己的 README 用 MD 写好。

所以你就把 readme.md 拿来当吐嘈的地方了？

好歹也拿你的 markdown 编辑器来看看你这个 readme 写成怎样了吧。

先不说怎样，你还没养成一个写 md 的习惯。 就学人写 md 编辑器？




这个该怎么说呢？我是真的没想到大家的关注点会在 readme 上。真是防不胜防。（黑人问好

关于 readme 不是 markdown 写的这个问题，我觉的现在这样挺好，如果看不下去请提交 patch 。

套句 linus 的话， talk is cheap show me the code 。（笑

如果实在受不了请出门左转。（ doge

为什么不是 GitHub

对，回帖用户们的关注点都是为了 dis 你。没人关注你的努力。没人关注你的孤独。没人给你应有的鼓励。
比如我的关注点是「.DS_Store 」。

我有 mac 我骄傲，开个玩笑，哈哈哈。

有的人从别人身上学习优点提高自己，有的人贬低别人抬高自己，做什么人都看自己，这个我倒是无所谓啦，又影响不到我。

放这个出来出发点也就帮助新手入门，能有人受益我就满足了，点个 star 让我知道我就更高兴啦。

star 不是这样用的

哪里都能看到“（逃”……

嗨呀，我看到留言里还有恶语攻击的人，真的是醉了，楼主都说了只是拿来入个 Web 门，被一个一个秀优越的来说事情，语气真的不好

readme 可以再改善下下~支持~~

做了 10 年的程序员代码都写得这么渣。。

, 我也觉得强迫症认为应该是 GitHub, 是吧,

是啊，我也是觉得无论怎样，也是人家花了点心思做的东西。虽然非常简单，但也不至于这样恶语。

如果我写了十年 Windows 批处理现在入个 Web 门你该说我什么？

嗯

README 先写好吧！例如怎样使用，怎样安装，注意事项等等！

我指的是他的代码风格




反正这样的代码我是写不出来。

大神，出门左转吧，咱这渣渣代码入不了您的法眼。不知道有没有机会拜读大神的代码

会有机会让你见识光神的代码

会有机会让你见识光神的代码



代码规范很好做的， nodepad++，插件 jstool > jsformat.

这个代码使用 ATOM BETAUTFUL 扫过的，你让我还说啥。。反正喷子怎么都有借口喷

把这贴子帮忙关了吧，没有一个讨论功能的，一群挑刺打口水仗的， V2EX 就这样了。

对于Node.js菜鸟来说，制作一个简单的Markdown编辑器是一个非常不错的练手项目。这个编辑器可以包含基本的Markdown语法高亮、实时预览等功能。下面是一个简单的实现思路及代码示例：

  1. 初始化项目：

    mkdir markdown-editor
cd markdown-editor
npm init -y
npm install express marked highlight.js express-handlebars

  2. 创建服务器 (server.js)：

    const express = require('express');
const { marked } = require('marked');
const hljs = require('highlight.js');
const exphbs = require('express-handlebars');

const app = express();
app.engine('handlebars', exphbs({ extname: '.hbs' }));
app.set('view engine', 'handlebars');

app.use(express.static('public'));

app.get('/', (req, res) => {
    res.render('index');
});

app.post('/preview', (req, res) => {
    const markdown = req.body.markdown;
    const html = marked(markdown, { highlight: function(code, lang) {
        return hljs.highlightAuto(code).value;
    }});
    res.send({ html });
});

app.listen(3000, () => console.log('Server started on port 3000'));

  3. 创建前端页面 (views/index.hbs)：

    <!DOCTYPE html>
<html>
<head><title>Markdown Editor</title></head>
<body>
    <textarea id="markdown" rows="10" cols="30"></textarea>
    <div id="preview"></div>
    <script src="/js/app.js"></script>
</body>
</html>

  4. 前端脚本 (public/js/app.js)：

    // Fetch and display Markdown preview (left as an exercise for the reader)

这只是一个简单的框架，你可以在此基础上添加更多功能，比如样式、图片上传等。祝你练手愉快！

回到顶部