title: Ferramentas e plugins para Markdown description: Guia de editores, pré‑visualização, conversão e plugins para gerir e expandir documentação em Markdown com eficiência.

Ferramentas e plugins

Escolher bem as ferramentas e plugins melhora muito a produtividade e a qualidade dos documentos. Este guia apresenta categorias essenciais para construíres um fluxo de trabalho completo em Markdown.

Editores recomendados

Editores de código

Visual Studio Code

Destaques: gratuito, multiplataforma, ecossistema de extensões

markdown

推荐插件：
- Markdown All in One — suporte completo
- Markdown Preview Enhanced — pré‑visualização avançada
- markdownlint — lint e estilo
- Paste Image — colagem rápida de imagens
- Table Editor — edição visual de tabelas
- Math to Image — fórmulas → imagem

Exemplo de configuração：

json

{
  "markdown.preview.fontSize": 14,
  "markdown.preview.lineHeight": 1.6,
  "markdown.extension.toc.levels": "1..6",
  "markdown.extension.print.absoluteImgPath": false,
  "[markdown]": {
    "editor.wordWrap": "on",
    "editor.lineNumbers": "on",
    "editor.quickSuggestions": false
  }
}

Typora

Destaques: WYSIWYG, interface simples, muitos temas

markdown

Funcionalidades principais:
- Edição com pré‑visualização em tempo real
- Suporte a fórmulas matemáticas
- Integração com diagramas
- Exportação para vários formatos
- Cópia automática de imagens
- Edição visual de tabelas

Mark Text

Destaques: open‑source, pré‑visualização em tempo real, desempenho

markdown

Recursos principais:
- Renderização em tempo real
- Modo foco
- Suporte a matemática
- Suporte a fluxogramas
- Várias exportações
- Temas personalizáveis

Editores online

StackEdit

Destaques: no navegador, sincronização cloud, colaboração

markdown

Destaques:
- Sincronização com Google Drive e Dropbox
- Publicação para GitHub e plataformas de blog
- Suporte offline
- Fórmulas e diagramas
- Edição colaborativa
- Histórico de versões

Dillinger

Destaques: interface simples, integrações multiplataforma

markdown

Integrações:
- GitHub
- Dropbox
- Google Drive
- OneDrive
- Exportação HTML/PDF
- Pré‑visualização em tempo real

HackMD

Destaques: colaboração em equipa, modo apresentação

markdown

Colaboração:
- Edição multiutilizador em tempo real
- Sistema de comentários
- Controlo de versões
- Gestão de permissões
- Modo apresentação
- Modo livro

Pré‑visualização e conversão

Geradores de sites estáticos

VitePress

Destaques: ecossistema Vue, desempenho, moderno

javascript

// .vitepress/config.js
export default {
  title: 'My Documentation',
  description: 'A VitePress site',
  
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' }
    ],
    
    sidebar: {
      '/guide/': [
        {
          text: 'Getting Started',
          items: [
            { text: 'Introduction', link: '/guide/introduction' },
            { text: 'Installation', link: '/guide/installation' }
          ]
        }
      ]
    }
  },
  
  markdown: {
    math: true,
    mermaid: true,
    lineNumbers: true
  }
}

GitBook

Destaques: interface elegante, colaboração, gestão de versões

markdown

功能特色：
- 现代化阅读体验
- 团队协作编辑
- 多格式导出
- 搜索功能
- 集成分析
- API 文档生成

Docusaurus

Destaques: open‑source (Facebook), React, suporte multi‑idioma

javascript

// docusaurus.config.js
module.exports = {
  title: 'My Site',
  tagline: 'The tagline of my site',
  url: 'https://your-docusaurus-test-site.com',
  
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          editUrl: 'https://github.com/facebook/docusaurus/edit/master/website/',
        },
        blog: {
          showReadingTime: true,
          editUrl: 'https://github.com/facebook/docusaurus/edit/master/website/blog/',
        },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      },
    ],
  ],
  
  themeConfig: {
    navbar: {
      title: 'My Site',
      logo: {
        alt: 'My Site Logo',
        src: 'img/logo.svg',
      },
    },
  },
};

Ferramentas de conversão

Pandoc

Destaques: conversor versátil, linha de comandos, muitos formatos

bash

# Markdown → PDF
pandoc document.md -o document.pdf

# Markdown → Word
pandoc document.md -o document.docx

# Markdown → HTML (estilos próprios)
pandoc document.md -s --css=style.css -o document.html

# Conversão em lote
find . -name "*.md" -exec pandoc {} -o {}.pdf \;

# Usar template
pandoc document.md --template=template.html -o output.html

# Gerar índice
pandoc document.md --toc --toc-depth=3 -o document.pdf

markdownlint

Destaques: lint, normas consistentes, correção automática

bash

# Instalação
npm install -g markdownlint-cli

# Verificar ficheiro
markdownlint README.md

# Verificar diretório
markdownlint docs/

# Auto‑fix
markdownlint --fix *.md

# Usar ficheiro de configuração
markdownlint --config .markdownlint.json docs/

Exemplo de configuração:

json

{
  "default": true,
  "MD013": {
    "line_length": 120,
    "code_blocks": false,
    "tables": false
  },
  "MD033": {
    "allowed_elements": ["div", "span", "img", "a"]
  },
  "MD041": false
}

Imagem e média

Processamento de imagens

PicGo

Destaques: upload automático, multi‑plataforma, extensível com plugins

markdown

Plataformas suportadas:
- Qiniu Cloud
- Tencent COS
- UpYun
- GitHub
- Aliyun OSS
- Imgur
- Upload personalizado

Exemplo de configuração:

json

{
  "picBed": {
    "uploader": "github",
    "github": {
      "repo": "username/image-repo",
      "token": "your_github_token",
      "path": "images/",
      "customUrl": "https://cdn.jsdelivr.net/gh/username/image-repo",
      "branch": "main"
    }
  },
  "settings": {
    "autoRename": true,
    "uploadNotification": true
  }
}

ImageOptim / TinyPNG

Destaques: compressão de imagens, tamanho reduzido, mantém qualidade

bash

# 使用 ImageOptim CLI
imageoptim *.png *.jpg

# 使用 TinyPNG API
curl --user api:YOUR_API_KEY \
     --data-binary @original.png \
     --output compressed.png \
     https://api.tinify.com/shrink

Ferramentas para diagramas

draw.io (diagrams.net)

Destaques: gratuito, poderoso, exportação multi‑formato

markdown

Casos de uso:
- Arquitetura de sistemas
- Desenho de fluxogramas
- Diagramas UML
- Topologias de rede
- Mapas mentais
- Prototipagem

Excalidraw

Destaques: estilo esboço, colaboração, simples de usar

markdown

Funcionalidades:
- Diagramas em estilo desenhado à mão
- Colaboração em tempo real
- Uso offline
- Exportação PNG/SVG
- Gestão de bibliotecas
- Tela infinita

Plataformas de documentação

Ferramentas de colaboração

Notion

Destaques: workspace integrado, bases de dados, muitos templates

markdown

Recursos para documentação:
- Estrutura hierárquica de páginas
- Edição colaborativa em tempo real
- Integração com bases de dados
- Sistema de templates
- Suporte multimédia
- Integração com API

Confluence

Destaques: nível empresarial, gestão de permissões, integrações robustas

markdown

Funcionalidades enterprise:
- Controlo de permissões avançado
- Fluxos de aprovação
- Personalização de marca
- Integrações empresariais
- Pesquisa avançada
- Relatórios analíticos

GitBook

Destaques: amigável para developers, controlo de versões, interface elegante

markdown

Vantagens principais:
- Integração com Git
- Histórico de versões
- Colaboração em equipa
- Domínio personalizado
- Pesquisa
- Analytics

Plataformas de publicação

GitHub Pages

Destaques: alojamento gratuito, controlo de versões, domínio personalizado

yaml

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16'
        
    - name: Install dependencies
      run: npm install
      
    - name: Build
      run: npm run build
      
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./dist

Netlify

Destaques: deploy rápido, CDN, formulários

toml

# netlify.toml
[build]
  publish = "dist"
  command = "npm run build"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[build.environment]
  NODE_VERSION = "16"

Vercel

Destaques: deploy sem configuração, CDN global, previews de deploy

json

{
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "dist"
      }
    }
  ],
  "routes": [
    {
      "handle": "filesystem"
    },
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

自动化工具

CI/CD 集成

GitHub Actions

工作流示例：

yaml

name: Documentation Build and Deploy

on:
  push:
    branches: [ main ]
    paths: [ 'docs/**' ]
  pull_request:
    branches: [ main ]
    paths: [ 'docs/**' ]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    
    - name: Lint Markdown
      uses: articulate/actions-markdownlint@v1
      with:
        config: .markdownlint.json
        files: 'docs/**/*.md'

  build:
    needs: lint
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16'
        cache: 'npm'
        
    - name: Install dependencies
      run: npm ci
      
    - name: Build VitePress
      run: npm run docs:build
      
    - name: Upload artifact
      uses: actions/upload-pages-artifact@v1
      with:
        path: docs/.vitepress/dist

  deploy:
    needs: build
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
    - name: Deploy to GitHub Pages
      id: deployment
      uses: actions/deploy-pages@v1

Pre-commit Hooks

配置文件 .pre-commit-config.yaml：

yaml

repos:
  - repo: https://github.com/pre-commit/pre-commit-hooks
    rev: v4.4.0
    hooks:
      - id: trailing-whitespace
      - id: end-of-file-fixer
      - id: check-yaml
      - id: check-added-large-files
      
  - repo: https://github.com/igorshubovych/markdownlint-cli
    rev: v0.32.2
    hooks:
      - id: markdownlint
        args: ['--fix']
        
  - repo: https://github.com/psf/black
    rev: 22.10.0
    hooks:
      - id: black
        language_version: python3
        
  - repo: local
    hooks:
      - id: docs-build
        name: Build documentation
        entry: npm run docs:build
        language: system
        files: '^docs/.*\.md$'
        pass_filenames: false

文档生成工具

API 文档自动生成

javascript

// 使用 JSDoc 生成 API 文档
/**
 * 创建新用户
 * @param {Object} userData - 用户数据
 * @param {string} userData.name - 用户姓名
 * @param {string} userData.email - 邮箱地址
 * @param {string} [userData.role=user] - 用户角色
 * @returns {Promise<Object>} 创建的用户对象
 * @example
 * const user = await createUser({
 *   name: '张三',
 *   email: 'zhangsan@example.com'
 * });
 */
async function createUser(userData) {
  // 实现代码...
}

bash

# 生成文档
jsdoc src/ -d docs/api/ -c jsdoc.conf.json

OpenAPI/Swagger 文档

yaml

# openapi.yaml
openapi: 3.0.0
info:
  title: 用户管理 API
  version: 1.0.0
  description: 用户管理系统的 RESTful API

paths:
  /users:
    post:
      summary: 创建新用户
      requestBody:
        required: true
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/CreateUserRequest'
      responses:
        '201':
          description: 用户创建成功
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/User'

components:
  schemas:
    User:
      type: object
      properties:
        id:
          type: string
          example: "12345"
        name:
          type: string
          example: "张三"
        email:
          type: string
          format: email
          example: "zhangsan@example.com"
    
    CreateUserRequest:
      type: object
      required:
        - name
        - email
      properties:
        name:
          type: string
        email:
          type: string
          format: email
        role:
          type: string
          default: "user"

性能优化工具

构建优化

图片优化脚本

javascript

// optimize-images.js
const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

async function optimizeImages(dir) {
  const files = fs.readdirSync(dir);
  
  for (const file of files) {
    const filePath = path.join(dir, file);
    const stat = fs.statSync(filePath);
    
    if (stat.isDirectory()) {
      await optimizeImages(filePath);
    } else if (/\.(jpg|jpeg|png)$/i.test(file)) {
      const outputPath = filePath.replace(/\.(jpg|jpeg|png)$/i, '.webp');
      
      await sharp(filePath)
        .webp({ quality: 80 })
        .toFile(outputPath);
        
      console.log(`优化: ${file} -> ${path.basename(outputPath)}`);
    }
  }
}

optimizeImages('./docs/assets/images');

文档构建脚本

javascript

// build-docs.js
const { execSync } = require('child_process');
const fs = require('fs');
const path = require('path');

function buildDocs() {
  console.log('📝 开始构建文档...');
  
  // 1. 检查 Markdown 语法
  console.log('🔍 检查 Markdown 语法...');
  execSync('markdownlint docs/', { stdio: 'inherit' });
  
  // 2. 优化图片
  console.log('🖼️ 优化图片...');
  execSync('node optimize-images.js', { stdio: 'inherit' });
  
  // 3. 构建静态站点
  console.log('🏗️ 构建静态站点...');
  execSync('vitepress build docs', { stdio: 'inherit' });
  
  // 4. 生成站点地图
  console.log('🗺️ 生成站点地图...');
  generateSitemap();
  
  console.log('✅ 文档构建完成！');
}

function generateSitemap() {
  const baseUrl = 'https://yoursite.com';
  const pages = findMarkdownFiles('./docs');
  
  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${pages.map(page => `  <url>
    <loc>${baseUrl}${page}</loc>
    <lastmod>${new Date().toISOString().split('T')[0]}</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>`).join('\n')}
</urlset>`;

  fs.writeFileSync('./docs/.vitepress/dist/sitemap.xml', sitemap);
}

function findMarkdownFiles(dir, basePath = '') {
  const files = [];
  const items = fs.readdirSync(dir);
  
  for (const item of items) {
    const fullPath = path.join(dir, item);
    const relativePath = path.join(basePath, item);
    
    if (fs.statSync(fullPath).isDirectory()) {
      files.push(...findMarkdownFiles(fullPath, relativePath));
    } else if (item.endsWith('.md') && item !== 'README.md') {
      const urlPath = relativePath
        .replace(/\.md$/, '.html')
        .replace(/\\/g, '/');
      files.push('/' + urlPath);
    }
  }
  
  return files;
}

buildDocs();

工具选择指南

按需求选择工具

markdown

## 个人博客写作
推荐组合：
- 编辑器：Typora 或 Mark Text
- 部署：GitHub Pages + Jekyll
- 图片：PicGo + GitHub
- 版本：Git

## 团队文档协作
推荐组合：
- 平台：Notion 或 GitBook
- 编辑器：VS Code + 插件
- 版本：Git + GitHub
- 自动化：GitHub Actions

## 技术文档网站
推荐组合：
- 生成器：VitePress 或 Docusaurus
- 编辑器：VS Code
- 部署：Netlify 或 Vercel
- 图表：Mermaid + draw.io

## API 文档
推荐组合：
- 工具：Swagger/OpenAPI
- 生成：Redoc 或 SwaggerUI
- 集成：Postman
- 测试：Newman

## Artigos académicos
Recomendado:
- Editor: Typora + Pandoc
- Fórmulas: MathJax/KaTeX
- Referências: Zotero
- Conversão: Pandoc LaTeX

Comparação de custos

Tipo	Gratuito	Pago	Enterprise
Editor	VS Code, Mark Text	Typora	—
Alojamento	GitHub Pages	Netlify Pro	—
Colaboração	GitHub	Notion	Confluence
Imagens	GitHub	Qiniu	Nuvem privada
Domínio	github.io	Domínio próprio	Corporativo

Sintaxe relacionada

Recomendações finais

Para iniciantes

markdown

🚀 Kit de arranque:
1. Editor: VS Code + Markdown All in One
2. Pré‑visualização: plugin em tempo real
3. Versionamento: Git + GitHub
4. Deploy: GitHub Pages
5. Imagens: no repositório

💰 Custo: gratuito
⏱️ Aprendizagem: 1–2 horas
🎯 Para: blog pessoal, docs de pequenos projetos

Intermédio/avançado

markdown

⚡ Profissional:
1. Editor: Typora + VS Code
2. Gerador: VitePress
3. Imagens: PicGo + armazenamento cloud
4. Colaboração: GitHub + Issues
5. Automação: GitHub Actions
6. Métricas: Google Analytics

💰 Custo: médio
⏱️ Aprendizagem: 1–2 dias
🎯 Para: equipas técnicas, open‑source

Empresas

markdown

🏢 Corporativo:
1. Plataforma: Confluence ou GitBook
2. Edição: VS Code + plugins de equipa
3. Versionamento: Git empresarial
4. Deploy: cloud privada + CDN
5. Colaboração: gestão completa de permissões
6. Integração: CI/CD + monitorização

💰 Custo: elevado
⏱️ Implementação: 1–2 semanas
🎯 Para: grandes empresas, documentação de produto

Com a escolha e configuração certas, consegues um workflow eficiente e profissional em Markdown, acelerando a criação e a manutenção das tuas documentações.

title: Ferramentas e plugins para Markdown description: Guia de editores, pré‑visualização, conversão e plugins para gerir e expandir documentação em Markdown com eficiência. ​

Ferramentas e plugins ​

Editores recomendados ​

Editores de código ​

Visual Studio Code ​

Typora ​

Mark Text ​

Editores online ​

StackEdit ​

Dillinger ​

HackMD ​

Pré‑visualização e conversão ​

Geradores de sites estáticos ​

VitePress ​

GitBook ​

Docusaurus ​

Ferramentas de conversão ​

Pandoc ​

markdownlint ​

Imagem e média ​

Processamento de imagens ​

PicGo ​

ImageOptim / TinyPNG ​

Ferramentas para diagramas ​

draw.io (diagrams.net) ​

Excalidraw ​

Plataformas de documentação ​

Ferramentas de colaboração ​

Notion ​

Confluence ​

GitBook ​

Plataformas de publicação ​

GitHub Pages ​

Netlify ​

Vercel ​

自动化工具 ​

CI/CD 集成 ​

GitHub Actions ​

Pre-commit Hooks ​

文档生成工具 ​

API 文档自动生成 ​

OpenAPI/Swagger 文档 ​

性能优化工具 ​

构建优化 ​

图片优化脚本 ​

文档构建脚本 ​

工具选择指南 ​

按需求选择工具 ​

Comparação de custos ​

Sintaxe relacionada ​

Recomendações finais ​

Para iniciantes ​

Intermédio/avançado ​

Empresas ​

title: Ferramentas e plugins para Markdown description: Guia de editores, pré‑visualização, conversão e plugins para gerir e expandir documentação em Markdown com eficiência.

Ferramentas e plugins

Editores recomendados

Editores de código

Visual Studio Code

Typora

Mark Text

Editores online

StackEdit

Dillinger

HackMD

Pré‑visualização e conversão

Geradores de sites estáticos

VitePress

GitBook

Docusaurus

Ferramentas de conversão

Pandoc

markdownlint

Imagem e média

Processamento de imagens

PicGo

ImageOptim / TinyPNG

Ferramentas para diagramas

draw.io (diagrams.net)

Excalidraw

Plataformas de documentação

Ferramentas de colaboração

Notion

Confluence

GitBook

Plataformas de publicação

GitHub Pages

Netlify

Vercel

自动化工具

CI/CD 集成

GitHub Actions

Pre-commit Hooks

文档生成工具

API 文档自动生成

OpenAPI/Swagger 文档

性能优化工具

构建优化

图片优化脚本

文档构建脚本

工具选择指南

按需求选择工具

Comparação de custos

Sintaxe relacionada

Recomendações finais

Para iniciantes

Intermédio/avançado

Empresas