如何在博客网站集成VS Code作为Markdown编辑器？

Readme.so这类网站用的并非原生VS Code，而是基于Monaco Editor——VS Code的核心编辑器组件——来实现Markdown编辑功能。下面是具体的集成步骤：

1. 引入Monaco Editor #

首先通过包管理器安装依赖：

npm install monaco-editor

如果是纯前端项目，可通过项目构建工具（如Webpack、Vite）直接导入模块：

import * as monaco from 'monaco-editor';

2. 初始化Markdown编辑器 #

先在页面中创建一个承载编辑器的DOM容器：

<div id="markdown-editor" style="width: 100%; height: 600px;"></div>

然后编写初始化代码，配置Markdown语言支持和VS Code风格界面：

// 获取容器元素
const editorContainer = document.getElementById('markdown-editor');

// 初始化编辑器，配置VS Code风格参数
const editor = monaco.editor.create(editorContainer, {
  value: '# 开始编辑你的Markdown内容',
  language: 'markdown', // 指定编辑语言为Markdown
  theme: 'vs-dark', // 可选主题：vs（浅色）、vs-dark（深色）、hc-black（高对比度）
  minimap: { enabled: true }, // 显示VS Code风格的小地图
  fontSize: 14,
  lineNumbers: 'on',
  wordWrap: 'on',
  automaticLayout: true // 容器大小变化时自动调整编辑器尺寸
});

// 监听内容变化，同步到博客保存逻辑
editor.onDidChangeModelContent(() => {
  const content = editor.getValue();
  // 这里可将content传入文章保存API或本地存储
});

3. 实现实时预览（可选，模拟Readme.so双栏效果） #

配合Markdown解析库（如marked）实现实时预览，先安装依赖：

npm install marked

添加预览容器和同步逻辑：

<div style="display: flex; gap: 20px;">
  <div id="markdown-editor" style="flex: 1; height: 600px;"></div>
  <div id="markdown-preview" style="flex: 1; padding: 20px; border: 1px solid #eee; overflow-y: auto;"></div>
</div>

import { marked } from 'marked';

// 监听编辑器内容变化，实时渲染预览
editor.onDidChangeModelContent(() => {
  const markdownContent = editor.getValue();
  const htmlContent = marked.parse(markdownContent);
  document.getElementById('markdown-preview').innerHTML = htmlContent;
});

4. 增强编辑器功能（可选） #

• 快捷键支持：Monaco Editor默认继承VS Code的大部分Markdown快捷键，比如Ctrl+B加粗、Ctrl+I斜体、Ctrl+K插入链接等，无需额外配置。
• 自定义工具栏：添加按钮实现快速插入Markdown元素，比如插入一级标题：

  // 插入一级标题按钮点击事件
  document.getElementById('btn-h1').addEventListener('click', () => {
    const pos = editor.getPosition();
    editor.executeEdits('', [
      {
        range: new monaco.Range(pos.lineNumber, 1, pos.lineNumber, 1),
        text: '# '
      }
    ]);
    // 光标定位到标题文本后
    editor.setPosition(new monaco.Position(pos.lineNumber, 3));
  });
  

• 代码块高亮：Monaco Editor会自动识别Markdown中的代码块并应用语法高亮，无需额外配置。

内容的提问来源于stack exchange，提问作者Luka Fridonich Donadze