md2googleslides
0.5
Gere Apresentações Google a partir de descontos e HTML. Execute a partir da linha de comando ou incorpore em outro aplicativo.
Este projeto foi desenvolvido como um exemplo de como usar a API Slides.
Embora ainda não produza decks incrivelmente bonitos, você é incentivado a usar esta ferramenta para criar protótipos de apresentações rapidamente.
Contribuições são bem-vindas.
Para uso de linha de comando, instale md2gslides globalmente:
npm install -g md2gslidesEm seguida, obtenha suas credenciais de ID do cliente OAuth:
client_id.json (o nome deve corresponder) e salve em ~/.md2googleslides .Após a instalação, importe seus slides executando:
md2gslides slides.md --title " Talk Title " Isso irá gerar novos Apresentações Google em sua conta com o título Talk Title .
NOTA: Na primeira vez que o comando for executado, será solicitada autorização. As credenciais do token OAuth são armazenadas localmente em um arquivo chamado ~/.md2googleslides/credentials.json .
Cada vez que você executar o comentário acima, uma nova apresentação de slides será gerada. Para trabalhar exatamente no mesmo deck, basta obter o ID dos slides já gerados. Por exemplo, você pode usar o seguinte comando:
# To reuse deck available at: https://docs.google.com/presentation/d/<some id>/edit#
md2gslides slides.md --title "Talk Title" --append <some id> --erase
md2gslides usa um subconjunto das regras CommonMark e Github Flavored Markdown para markdown.
Cada slide é normalmente representado por um cabeçalho, seguido por zero ou mais elementos de bloco.
Comece um novo slide com uma régua horizontal ( --- ). O separador pode ser omitido para o primeiro slide.
Os exemplos a seguir mostram como criar slides de vários layouts:
---
# Este é um slide de título
## Seu nome aqui
---
# Este é o título de uma seção
---
# Título da seção e slide do corpo
## Isto é uma legenda
Este é o corpo
---
# Título e corpo do slide
Este é o corpo do slide.
Adicione {.big} ao título para criar um slide com um ponto grande
---
# Este é o ponto principal {.big}
Use {.big} em um cabeçalho em combinação com um corpo também.
---
# 100% {.grande}
Este é o corpo
Colunas separadas com {.column} . O marcador deve aparecer em sua própria linha com um espaço em branco antes e depois.
---
# Layout de duas colunas
Esta é a coluna da esquerda
{.coluna}
Esta é a coluna da direita
md2googleslides não edita nem controla nenhuma opção relacionada ao tema. Basta definir um tema base desejado diretamente no Apresentações Google. Mesmo se você usar a opção --append para reutilização do deck, o tema não será alterado.
As imagens podem ser colocadas em slides usando tags de imagem. Várias imagens podem ser incluídas. Várias imagens em um único parágrafo são organizadas em colunas, vários parágrafos organizados em linhas.
Observação: as imagens estão atualmente dimensionadas e centralizadas para caber no modelo do slide.
---
# Os slides podem ter imagens
Defina a imagem de fundo de um slide adicionando {.background} ao final do URL de uma imagem.
---
# Os slides podem ter imagens de fundo
{.background}
Inclua vídeos do YouTube com uma tag de imagem modificada.
---
# Slides podem ter vídeos
@[youtube](MG8KADiRbOU)
Inclua anotações do apresentador em um slide usando comentários HTML. O texto dentro dos comentários pode incluir descontos para formatação, embora apenas a formatação de texto seja permitida. Vídeos, imagens e tabelas são ignorados nas anotações do palestrante.
---
# Título do slide
{.background}
<!--
Estas são notas do orador.
-->
São permitidas regras básicas de formatação, incluindo:
A marcação a seguir ilustra alguns estilos comuns.
**Negrito**, *itálico* e ~~tachado~~ podem ser usados. Listas ordenadas: 1. Item 1 1. Item 2 1. Item 2.1 Listas não ordenadas: *Item 1 *Item 2 *Item 2.1
Além disso, um subconjunto de tags HTML embutidas é compatível com estilo.
<span><sup><sub><em><i><strong><b> Estilos CSS suportados para uso com elementos <span> :
colorbackground-colorfont-weight: boldfont-style: italictext-decoration: underlinetext-decoration: line-throughfont-familyfont-variant: small-capsfont-size (deve usar pontos para unidades) Você também pode usar atributos {style="..."} após elementos de marcação para aplicar estilos. Isso pode ser usado em cabeçalhos, elementos embutidos, blocos de código, etc.
Use emoji estilo Github em seu texto usando o :emoji: .
O exemplo a seguir insere emoji no cabeçalho e no corpo do slide.
### Eu :coração: gatos :heart_eyes_cat:
São suportados blocos de código recuados e protegidos, com realce de sintaxe.
O exemplo a seguir renderiza o código destacado.
### Olá mundo
```javascript
console.log('Olá mundo');
```
Para alterar o tema de destaque de sintaxe, especifique a opção --style <theme> na linha de comando. Todos os temas destaque.js são suportados. Por exemplo, para usar o tema github
md2gslides slides.md --style githubVocê também pode aplicar alterações adicionais de estilo a todo o bloco, como alterar o tamanho da fonte:
### Olá mundo
```javascript
console.log('Olá mundo');
```{style="tamanho da fonte: 36pt"}
As tabelas são suportadas pela sintaxe GFM.
Nota: Incluir tabelas e outros elementos de bloco no mesmo slide pode produzir resultados ruins com elementos sobrepostos. Evite ou ajuste manualmente o layout após gerar os slides.
O seguinte gera uma tabela 2x5 no slide.
### Principais animais de estimação nos Estados Unidos Animal | Número -------|-------- Peixe | 142 milhões Gatos | 88 milhões Cães | 75 milhões Aves | 16 milhões
Imagens que fazem referência a caminhos locais temporariamente carregadas e hospedadas em file.io. File.io é um serviço efêmero de serviço de arquivos que gera URLs aleatórios de curta duração para o arquivo de upload e exclui o conteúdo logo após o uso.
Como as imagens locais são enviadas para terceiros, é necessária a aceitação explícita para usar esse recurso. Inclua a opção --use-fileio para aceitar o upload de imagens. Isso se aplica a imagens baseadas em arquivo, bem como a conteúdo rasterizado automaticamente, como expressões matemáticas e SVGs.
Os slides também podem incluir imagens geradas, usando blocos cercados $$$ para os dados. As imagens geradas atualmente suportadas são expressões matemáticas (TeX e MathML), bem como SVG. Imagens rasterizadas são tratadas como imagens locais e exigem a aceitação do upload de imagens para um serviço de terceiros por meio da opção --use-fileio .
Usando TeX:
#Que tal um pouco de matemática? $$$ matemática cos (2teta) = cos^2 teta - sin^2 teta $$$
SVG
#Ou algum SVG?
$$$ SVG
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 48 48">
<defs>
<caminho id="a" d="M44.5 20H24v8.5h11.8C34.7 33,9 30,1 37 24 37c-7,2 0-13-5,8-13-13s5,8-13 13-13c3,1 0 5,9 1,1 8,1 2,9l6,4-6,4C34,6 4,1 29,6 2 24 2 11,8 2 2 11,8 2 24s9,8 22 22 22c11 0 21-8 21-22 0-1,3-,2-2,7-,5-4z"/>
</defs>
<clipPath id="b">
<use xlink:href="#a" overflow="visible"/>
</clipPath>
<path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/>
<caminho clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/>
<path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/>
</svg>
$$$
Assim como as imagens locais, as imagens geradas são veiculadas temporariamente via file.io.
Solicitações pull para outros geradores de imagens (por exemplo, sereia, chartjs, etc.) são bem-vindas!
Você também pode canalizar a redução para a ferramenta omitindo o argumento do nome do arquivo.
Com exceção de /bin/md2gslides.js , TypeScript é usado e compilado com Babel. Mocha e Chai são usados para testes.
Antes de qualquer coisa, certifique-se de ter todas as dependências:
npm installPara compilar:
npm run compilePara executar testes de unidade:
npm run testPara testes de lint/formatação:
npm run lintConsulte CONTRIBUINDO para termos adicionais.
Esta biblioteca está licenciada sob Apache 2.0. O texto completo da licença está disponível em LICENSE.
