md2googleslides
0.5
Genere Presentaciones de Google a partir de rebajas y HTML. Ejecute desde la línea de comando o insértelo en otra aplicación.
Este proyecto se desarrolló como un ejemplo de cómo utilizar la API de Presentaciones.
Si bien todavía no produce presentaciones increíblemente hermosas, le recomendamos que utilice esta herramienta para crear rápidamente prototipos de presentaciones.
Las contribuciones son bienvenidas.
Para uso desde la línea de comandos, instale md2gslides globalmente:
npm install -g md2gslidesLuego obtenga sus credenciales de ID de cliente de OAuth:
client_id.json (el nombre debe coincidir) y guárdelo en ~/.md2googleslides .Después de la instalación, importe sus diapositivas ejecutando:
md2gslides slides.md --title " Talk Title " Esto generará nuevas Presentaciones de Google en su cuenta con el título Talk Title .
NOTA: La primera vez que se ejecute el comando se le solicitará autorización. Las credenciales del token de OAuth se almacenan localmente en un archivo llamado ~/.md2googleslides/credentials.json .
Cada vez que ejecute el comentario anterior, se generará una nueva presentación de diapositivas. Para trabajar exactamente en la misma plataforma, simplemente obtenga la identificación de las diapositivas ya generadas. Por ejemplo, puede utilizar el siguiente 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 utiliza un subconjunto de las reglas de CommonMark y Github Flavored Markdown para el descuento.
Cada diapositiva suele estar representada por un encabezado, seguido de cero o más elementos de bloque.
Comience una nueva diapositiva con una regla horizontal ( --- ). El separador puede omitirse para la primera diapositiva.
Los siguientes ejemplos muestran cómo crear diapositivas con varios diseños:
---
# Esta es una diapositiva de título
## Tu nombre aquí
---
# Este es el título de una sección
---
# Título de la sección y diapositiva del cuerpo
## Este es un subtítulo
este es el cuerpo
---
# Título y diapositiva del cuerpo
Este es el cuerpo de la diapositiva.
Agrega {.big} al título para crear una diapositiva con un punto importante
---
# Este es el punto principal {.big}
Utilice {.big} en un encabezado en combinación con un cuerpo también.
---
# 100% {.grande}
este es el cuerpo
Separe las columnas con {.column} . El marcador debe aparecer en su propia línea con un espacio en blanco tanto antes como después.
---
# Diseño de dos columnas
Esta es la columna de la izquierda
{.columna}
Esta es la columna de la derecha
md2googleslides no edita ni controla ninguna opción relacionada con el tema. Simplemente configure el tema base que desee en Presentaciones de Google directamente. Incluso si usa la opción --append para reutilizar la plataforma, el tema no cambiará.
Las imágenes se pueden colocar en diapositivas mediante etiquetas de imagen. Se pueden incluir varias imágenes. Varias imágenes de un solo párrafo se organizan en columnas y varios párrafos se organizan como filas.
Nota: Actualmente, las imágenes están escaladas y centradas para ajustarse a la plantilla de diapositiva.
---
# Las diapositivas pueden tener imágenes.
Configure la imagen de fondo de una diapositiva agregando {.background} al final de la URL de una imagen.
---
# Las diapositivas pueden tener imágenes de fondo.
{.antecedentes}
Incluya videos de YouTube con una etiqueta de imagen modificada.
---
# Las diapositivas pueden tener videos.
@[youtube](MG8KADiRbOU)
Incluya notas del orador para una diapositiva utilizando comentarios HTML. El texto dentro de los comentarios puede incluir rebajas para el formato, aunque solo se permite el formato de texto. Los vídeos, imágenes y tablas se ignoran dentro de las notas del orador.
---
# Título de la diapositiva
{.antecedentes}
<!--
Estas son notas del orador.
-->
Se permiten reglas de formato básicas, que incluyen:
La siguiente rebaja ilustra algunos estilos comunes.
Se pueden utilizar **negrita**, *cursiva* y ~~tachado~~. Listas ordenadas: 1. Artículo 1 1. Artículo 2 1. Punto 2.1 Listas desordenadas: * Artículo 1 * Artículo 2 * Punto 2.1
Además, se admite un subconjunto de etiquetas HTML en línea para aplicar estilos.
<span><sup><sub><em><i><strong><b> Estilos CSS soportados para usar con elementos <span> :
colorbackground-colorfont-weight: boldfont-style: italictext-decoration: underlinetext-decoration: line-throughfont-familyfont-variant: small-capsfont-size (debe usar puntos para unidades) También puede utilizar atributos {style="..."} después de los elementos de rebajas para aplicar estilos. Esto se puede usar en encabezados, elementos en línea, bloques de código, etc.
Utilice emoji estilo Github en su texto usando :emoji: .
El siguiente ejemplo inserta emoji en el encabezado y el cuerpo de la diapositiva.
### Yo :corazón: gatos :corazón_ojos_gato:
Se admiten bloques de código delimitados y con sangría, con resaltado de sintaxis.
El siguiente ejemplo muestra el código resaltado.
### Hola Mundo
```javascript
console.log('Hola mundo');
```
Para cambiar el tema de resaltado de sintaxis, especifique la opción --style <theme> en la línea de comando. Todos los temas de Highlight.js son compatibles. Por ejemplo, para usar el tema github
md2gslides slides.md --style githubTambién puedes aplicar cambios de estilo adicionales a todo el bloque, como cambiar el tamaño de fuente:
### Hola Mundo
```javascript
console.log('Hola mundo');
```{estilo="tamaño de fuente: 36pt"}
Las tablas se admiten mediante la sintaxis GFM.
Nota: Incluir tablas y otros elementos de bloque en la misma diapositiva puede producir malos resultados con elementos superpuestos. Evite o ajuste manualmente el diseño después de generar las diapositivas.
Lo siguiente genera una tabla de 2x5 en la diapositiva.
### Principales mascotas en los Estados Unidos Animales | Número -------|-------- Pescado | 142 millones Gatos | 88 millones Perros | 75 millones Aves | 16 millones
Imágenes que hacen referencia a rutas locales cargadas y alojadas temporalmente en file.io. File.io es un servicio de servidor de archivos efímero que genera URL aleatorias de corta duración para el archivo cargado y elimina el contenido poco después de su uso.
Dado que las imágenes locales se cargan a terceros, se requiere una suscripción explícita para utilizar esta función. Incluya la opción --use-fileio para optar por cargar imágenes. Esto se aplica a imágenes basadas en archivos, así como a contenido rasterizado automáticamente, como expresiones matemáticas y SVG.
Las diapositivas también pueden incluir imágenes generadas, utilizando $$$ bloques cercados para los datos. Las imágenes generadas actualmente admitidas son expresiones matemáticas (TeX y MathML), así como SVG. Las imágenes rasterizadas se tratan como imágenes locales y requieren autorización para cargar imágenes en un servicio de terceros a través de la opción --use-fileio .
Usando TeX:
# ¿Qué tal un poco de matemáticas? $$$ matemáticas cos (2theta) = cos^2 theta - sin^2 theta $$$
SVG
# ¿O algún SVG?
$$$ svg
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 48 48">
<definiciones>
<path 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>
<ruta clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/>
<ruta clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/>
<ruta clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/>
</svg>
$$$
Al igual que las imágenes locales, las imágenes generadas se publican temporalmente a través de file.io.
¡Las solicitudes de extracción para otros generadores de imágenes (por ejemplo, sirena, chartjs, etc.) son bienvenidas!
También puede canalizar la reducción a la herramienta omitiendo el argumento del nombre del archivo.
Con la excepción de /bin/md2gslides.js , TypeScript se utiliza y se compila con Babel. Mocha y Chai se utilizan para realizar pruebas.
Antes que nada, asegúrese de tener todas las dependencias:
npm installPara compilar:
npm run compilePara ejecutar pruebas unitarias:
npm run testPara pruebas de pelusa/formato:
npm run lintConsulte CONTRIBUCIÓN para conocer términos adicionales.
Esta biblioteca tiene licencia Apache 2.0. El texto completo de la licencia está disponible en LICENCIA.
