Markdown

@use-angular/markdown

UseMarkedown contém um UseMarkdownModule para Angular.

Inspirado orinalmente no componente ngx-md o UseMarkdown adiciona e utiliza as bibliotecas marked.js e prismjs para renderizar arquivos .md.

Conteúdo

Instruções de instalação
Como utilizar
Guia rápido
Contribuições
Licença

Instruções de instalação

Instale a partir do npm:

npm install @use-angular/markdown --save

Como utilizar

stackblitz — amostra disponível aqui
npm — para instalar a biblioteca @use-angular/markdown
github — para fazer download do código fonte
angular-cli — por favor consulte QuickStart angular-cli

Guia rápido

src/app/app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {UseMarkdownModule} from '@use-angular/markdown';
import {AppComponent} from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    UseMarkdownModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

src/app/app.template.html

[data]

<!-- use div html -->
<div use-markdown [data]="'### markdown code'"></div>
 
<!-- use componente angular -->
 
<use-markdown [data]="' ### markdown code'"></use-markdown>

[path]

<!-- para carregar a partir do caminho do arquivo -->
 
<div use-markdown [path]="'/path/to/readme.md'"></div>
 
<!-- carregar código-fonte remoto com realce automático de sintaxe -->
 
<use-markdown [path]="'/path/to/code.ts'"></use-markdown>
 
<use-markdown [path]="'/path/to/code.js'"></ngx-md>
 
<!-- carregar código-fonte armazenado na variável -->

<ngx-md [path]="urlVariable"></ngx-md>

src/index.html

Para destacar a sintaxe, é necessário importar o arquivo css do prismjs.

Opção 1: Importar do cdn

head

    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css" rel="stylesheet" />

Opção 2: Faça o download do arquivo css (ou copie de node_modules/prismjs/themes, coloque na pasta assets/styles e importe

head

<link href="/assets/styles/prism.min.css" rel="stylesheet" />

src/styles.scss

Opção 3: Inclua o arquivo prisma css em seu arquivo de estilo sass

@import 'prismjs/themes/prism.css';

src/app/app.component.ts

Para dar suporte ao destaque de sintaxe de outros idiomas, você precisa incluir

import 'prismjs/components/prism-c';
import 'prismjs/components/prism-cpp';
import 'prismjs/components/prism-csharp';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-diff';
import 'prismjs/components/prism-java';
import 'prismjs/components/prism-perl';
...

Destaque de sintaxe defaults

css, javascript, python, scss, typescript

Todo

[ ] Documentação no Padrão USE

Contribuições

Contibuições são sempre muito bem vindas! As contribuições não precisam serem somente através de desenvolvimentos de códigos, qualquer ajuda com ideias, sugestões, melhorias na documentação ou doações para os desenvolvedores são sempre muito apreciadas!

Participe da comunidade Projeto que Vale e colabore da forma que achar melhor.

Licença

MIT License

É concedida permissão, gratuitamente, a qualquer pessoa que obtenha uma cópia deste software e dos arquivos de documentação associados (o "Software"), para negociar o Software sem restrições, incluindo, sem limitação, os direitos de uso, cópia, modificação e fusão , publicar, distribuir, sublicenciar e / ou vender cópias do Software, e permitir que as pessoas a quem o Software é fornecido o façam, sujeitas às seguintes condições:

O aviso de copyright acima e este aviso de permissão devem ser incluídos em todas as cópias ou partes substanciais do Software.

O SOFTWARE É FORNECIDO "NO ESTADO EM QUE SE ENCONTRA", SEM NENHUM TIPO DE GARANTIA, EXPRESSA OU IMPLÍCITA, INCLUINDO, MAS NÃO SE LIMITANDO ÀS GARANTIAS DE COMERCIALIZAÇÃO, ADEQUAÇÃO A UM FIM ESPECÍFICO E NÃO VIOLAÇÃO. EM NENHUMA CIRCUNSTÂNCIA, OS AUTORES OU PROPRIETÁRIOS DE DIREITOS DE AUTOR PODERÃO SER RESPONSABILIZADOS POR QUAISQUER REIVINDICAÇÕES, DANOS OU OUTRAS RESPONSABILIDADES, QUER EM ACÇÃO DE CONTRATO, DELITO OU DE OUTRA FORMA, DECORRENTES DE, OU EM CONEXÃO COM O SOFTWARE OU O USO OU OUTRAS NEGOCIAÇÕES NO PROGRAMAS.