md2googleslides
0.5
Générez des diapositives Google à partir de démarques et de HTML. Exécutez à partir de la ligne de commande ou intégrez-le dans une autre application.
Ce projet a été développé comme exemple d'utilisation de l'API Slides.
Bien qu'il ne produise pas encore des présentations d'une beauté époustouflante, nous vous encourageons à utiliser cet outil pour prototyper rapidement des présentations.
Les contributions sont les bienvenues.
Pour une utilisation en ligne de commande, installez md2gslides globalement :
npm install -g md2gslidesEnsuite, récupérez vos identifiants client OAuth :
client_id.json (le nom doit correspondre) et enregistrez-le dans ~/.md2googleslides .Après l'installation, importez vos diapositives en exécutant :
md2gslides slides.md --title " Talk Title " Cela générera de nouveaux Google Slides dans votre compte avec le titre Talk Title .
REMARQUE : La première fois que la commande est exécutée, vous serez invité à fournir une autorisation. Les informations d'identification du jeton OAuth sont stockées localement dans un fichier nommé ~/.md2googleslides/credentials.json .
Chaque fois que vous exécuterez le commentaire ci-dessus, un nouveau jeu de diapositives sera généré. Afin de travailler exactement sur le même deck, il suffit d'obtenir l'ID des slides déjà générées. Par exemple, vous pouvez utiliser la commande suivante :
# 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 utilise un sous-ensemble des règles CommonMark et Github Flavored Markdown pour la démarque.
Chaque diapositive est généralement représentée par un en-tête, suivi de zéro ou plusieurs éléments de bloc.
Commencez une nouvelle diapositive avec une règle horizontale ( --- ). Le séparateur peut être omis pour la première diapositive.
Les exemples suivants montrent comment créer des diapositives de différentes mises en page :
---
# Ceci est une diapositive de titre
## Votre nom ici
---
# Ceci est un titre de section
---
# Titre de la section et corps de la diapositive
## Ceci est un sous-titre
C'est le corps
---
# Titre et corps de la diapositive
C'est le corps du toboggan.
Ajoutez {.big} au titre pour créer une diapositive avec un gros point
---
# C'est le point principal {.big}
Utilisez également {.big} sur un en-tête en combinaison avec un corps.
---
# 100% {.big}
C'est le corps
Séparez les colonnes par {.column} . Le marqueur doit apparaître sur sa propre ligne avec un blanc avant et après.
---
# Disposition en deux colonnes
C'est la colonne de gauche
{.colonne}
C'est la colonne de droite
md2googleslides ne modifie ni ne contrôle les options liées au thème. Définissez simplement un thème de base souhaité directement sur Google Slides. Même si vous utilisez l'option --append pour réutiliser le deck, le thème ne sera pas modifié.
Les images peuvent être placées sur des diapositives à l'aide de balises d'image. Plusieurs images peuvent être incluses. Plusieurs images dans un seul paragraphe sont disposées en colonnes, plusieurs paragraphes disposés en lignes.
Remarque : Les images sont actuellement mises à l'échelle et centrées pour s'adapter au modèle de diapositive.
---
# Les diapositives peuvent contenir des images
Définissez l'image d'arrière-plan d'une diapositive en ajoutant {.background} à la fin de l'URL d'une image.
---
# Les diapositives peuvent avoir des images d'arrière-plan
{.background}
Incluez des vidéos YouTube avec une balise d'image modifiée.
---
# Les diapositives peuvent contenir des vidéos
@[youtube](MG8KADiRbOU)
Incluez des notes de présentateur pour une diapositive à l'aide de commentaires HTML. Le texte à l'intérieur des commentaires peut inclure une démarque pour le formatage, bien que seul le formatage du texte soit autorisé. Les vidéos, images et tableaux sont ignorés dans les notes du présentateur.
---
# Titre de la diapositive
{.background}
<!--
Ce sont les notes du conférencier.
-->
Les règles de formatage de base sont autorisées, notamment :
La démarque suivante illustre quelques styles courants.
**Gras**, *italique* et ~~barré~~ peuvent être utilisés. Listes ordonnées : 1. Point 1 1. Point 2 1. Point 2.1 Listes non ordonnées : * Article 1 * Article 2 * Point 2.1
De plus, un sous-ensemble de balises HTML en ligne est pris en charge pour le style.
<span><sup><sub><em><i><strong><b> Styles CSS pris en charge à utiliser avec les éléments <span> :
colorbackground-colorfont-weight: boldfont-style: italictext-decoration: underlinetext-decoration: line-throughfont-familyfont-variant: small-capsfont-size (doit utiliser des points pour les unités) Vous pouvez également utiliser les attributs {style="..."} après les éléments de démarque pour appliquer des styles. Cela peut être utilisé sur les en-têtes, les éléments en ligne, les blocs de code, etc.
Utilisez des emoji de style Github dans votre texte en utilisant le :emoji: .
L'exemple suivant insère des emoji dans l'en-tête et le corps de la diapositive.
### I :coeur: chats :heart_eyes_cat:
Les blocs de code indentés et clôturés sont pris en charge, avec coloration syntaxique.
L'exemple suivant restitue le code en surbrillance.
### Bonjour le monde
```javascript
console.log('Bonjour tout le monde');
```
Pour modifier le thème de surbrillance de la syntaxe, spécifiez l'option --style <theme> sur la ligne de commande. Tous les thèmes highlight.js sont pris en charge. Par exemple, pour utiliser le thème github
md2gslides slides.md --style githubVous pouvez également appliquer des modifications de style supplémentaires à l'ensemble du bloc, par exemple en modifiant la taille de la police :
### Bonjour le monde
```javascript
console.log('Bonjour tout le monde');
```{style="font-size: 36pt"}
Les tableaux sont pris en charge via la syntaxe GFM.
Remarque : L'inclusion de tableaux et d'autres éléments de bloc sur la même diapositive peut produire de mauvais résultats avec des éléments qui se chevauchent. Évitez ou ajustez manuellement la mise en page après avoir généré les diapositives.
Ce qui suit génère un tableau 2x5 sur la diapositive.
### Meilleurs animaux de compagnie aux États-Unis Animaux | Nombre -------|-------- Poisson | 142 millions Chats | 88 millions Chiens | 75 millions Oiseaux | 16 millions
Images faisant référence à des chemins locaux temporairement téléchargées et hébergées sur file.io. File.io est un service de service de fichiers éphémères qui génère des URL aléatoires de courte durée vers le fichier de téléchargement et supprime le contenu peu de temps après utilisation.
Étant donné que les images locales sont téléchargées vers un tiers, une inscription explicite est requise pour utiliser cette fonctionnalité. Incluez l'option --use-fileio pour accepter le téléchargement d'images. Cela s'applique aux images basées sur des fichiers ainsi qu'au contenu automatiquement rastérisé comme les expressions mathématiques et les SVG.
Les diapositives peuvent également inclure des images générées, en utilisant des blocs $$$ clôturés pour les données. Les images générées actuellement prises en charge sont les expressions mathématiques (TeX et MathML) ainsi que SVG. Les images pixellisées sont traitées comme si les images locales nécessitaient d'accepter de télécharger des images vers un service tiers via l'option --use-fileio .
Utiliser TeX :
# Et si on faisait quelques maths ? $$$ mathématiques cos (2theta) = cos^2 theta - sin^2 theta $$$
SVG
# Ou du SVG ?
$$$
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 48 48">
<défs>
<chemin 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>
<identifiant clipPath="b">
<use xlink:href="#a" overflow="visible"/>
</clipPath>
<path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/>
<path 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>
$$$
Comme les images locales, les images générées sont temporairement servies via file.io.
Les demandes de tirage pour d'autres générateurs d'images (par exemple sirène, chartjs, etc.) sont les bienvenues !
Vous pouvez également rediriger la démarque vers l'outil en omettant l'argument du nom de fichier.
À l'exception de /bin/md2gslides.js , TypeScript est utilisé partout et compilé avec Babel. Moka et Chai sont utilisés pour les tests.
Avant toute chose, assurez-vous d'avoir toutes les dépendances :
npm installPour compiler :
npm run compilePour exécuter des tests unitaires :
npm run testPour les tests de charpie/formatage :
npm run lintVoir CONTRIBUTION pour les conditions supplémentaires.
Cette bibliothèque est sous licence Apache 2.0. Le texte complet de la licence est disponible dans LICENCE.
