Script de configuração zero para exibir documentos Markdown como páginas HTML estáticas
Gumdrop foi projetado para ser um script independente e fácil de usar que pode gerar sites e documentações escritas em Markdown. Ele carrega dinamicamente todas as suas dependências de um CDN (incluindo o analisador Markdown) e não requer nenhuma configuração ou inicialização.
O Gumdrop não requer instalação, basta carregá-lo em um documento HTML com uma tag script
.
< script src =" https://cdn.jsdelivr.net/npm/gumdrop@4 " > </ script >
Para criar um site estático com Markdown, tudo que você precisa é criar um modelo HTML ( index.html
) em seu servidor de arquivos e adicionar o Gumdrop como um arquivo de script externo.
< main > </ main >
< script src =" path/to/gumdrop.js " >
Esteja ciente de que você deve servir seus arquivos via protocolo
http
/https
, pois o protocolofile
não suporta solicitações de busca.
Arquivos Markdown na pasta pages
podem ser carregados. Gumdrop observa o fragmento hash da URL e carrega o arquivo Markdown correspondente da pasta pages
. Os arquivos Markdown analisados são renderizados no nó HTML <main>
, se presente, caso contrário, no body
. O arquivo padrão que é carregado se nenhum arquivo for especificado é pages/index.md
. Para criar um link para outro arquivo na pasta pages
basta criar um link com seu nome prefixado por #!/
.
[ Link to about.md ] ( #!/about )
Recursos estáticos (por exemplo, imagens) podem ser carregados de qualquer pasta servida pelo seu servidor de arquivos, os caminhos são relativos a index.html
. Páginas de erro para vários erros HTTP podem ser colocadas na pasta de errors
. Cada arquivo deve ser nomeado de acordo com o código de erro HTTP que representa (por exemplo, errors/404.md
).
Dados adicionais podem ser especificados para seus documentos em um YAML Front Matter. Você pode acessar esses dados em qualquer um dos seus documentos Markdown com modelos de bigode.
Você também pode usar arquivos separados para armazenar dados e vincular esses arquivos de recursos a um documento inicial. Os arquivos de recursos podem usar o tipo YAML (padrão), JSON ou Markdown. Qualquer valor no cabeçalho de um documento anotado com o tipo !file
é considerado um recurso de arquivo. Os caminhos de arquivo que começam com /
inicial são relativos a index.html
; se o /
inicial estiver faltando, a pasta data
será assumida como o local do recurso. Se nenhum tipo de arquivo (extensão) for fornecido, a extensão .yaml
será assumida. Para arquivos de recursos .md
o valor retornado será o documento Markdown renderizado.
# data/todo.yaml
todos :
- title : First todo
text : Complete your first assignment
completed : true
- title : YAML
text : Learn more about YAML Front Matters
completed : false
---
todos: !file todo.yaml
---
{{#todos}}
- **{{title}}**: {{text}} {{#completed}}(✔){{/completed}}
{{/todos}}
Os blocos de código protegidos são processados automaticamente pelo Prism.js. Os idiomas suportados são os idiomas padrão no pacote Prism.js. Para realce de sintaxe você deve incluir um estilo Prism.js em seu index.html
.
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.css " />
Você pode usar o Gumdrop com GitHub Pages, pois ele pode servir como um servidor de arquivos estático. Para evitar que as páginas do GitHub tentem transformar seu site com Jekyll, adicione um arquivo .nojekyll
vazio à raiz do seu site.
Todas as ideias, recomendações, relatórios de bugs e solicitações pull são bem-vindas. ?