Made in DeveloperHub
El bloque HTML te permite añadir cualquier contenido de la web a las páginas de tu documentación.
Para crear un bloque HTML:
Escribe / en una línea nueva o haz clic en a la izquierda de cualquier línea.
Selecciona HTML
Escribe el HTML. Consulta ¿Cómo usar el bloque HTML?
Haz clic en Apply, o pulsa ⌘ / ⌃ + ↵.
Dentro del editor HTML, Tab y ⇧ + Tab aplican y quitan sangría a la línea actual para que puedas mantener tu código ordenado.
Nunca inyectes código que no hayas revisado tú mismo.
¿Qué se incluye?
Ya tenemos cargados Bootstrap 4.1 y FontAwesome 5 Free, que puedes usar.
¿Cómo usar el bloque HTML?
Con el bloque HTML hay dos modos disponibles:
Cuando el HTML es simple, se renderiza directamente en la página (body), sin un iFrame. Ejemplo de código HTML:
En este modo puedes usar estilos en línea. No debes añadir etiquetas <body> ni <html>, ya que el contenido ya se renderiza dentro de una etiqueta <body>. Si quieres dar estilo a los elementos, puedes usar CSS personalizado para crear nuevas clases que puedes aplicar a los elementos aquí.
iFrame en el bloque HTML
Por seguridad, cuando el HTML incluye scripts o estilos, se renderiza en un iFrame dentro de la página. Por ejemplo, este código se renderizaría dentro de un iFrame:
Al usar un iFrame, no se carga ningún CSS preexistente, incluido el CSS de CSS personalizado o de cualquier biblioteca de terceros. Aplica tus propias reglas CSS.
El HTML simple que se renderiza directamente en la página comparte la Content Security Policy de tu documentación. Si sirves tu documentación con una CSP estricta, asegúrate de que permita los orígenes desde los que carga tu contenido incrustado (scripts, estilos, fuentes o frames); de lo contrario, el navegador los bloqueará.
Redimensionar iFrames dinámicos
Si tu bloque HTML se incrusta en un iFrame y este añade elementos dinámicamente al body, lo que limita la altura y hace que aparezcan barras de desplazamiento, puedes indicarle al iFrame que se redimensione usando:
Usa esta función siempre que añadas elementos al body dinámicamente.
Ejemplos de HTML personalizado
Estos son nuestros mejores ejemplos:
Botón llamativo
Genera este botón con:
Botón de colección de Postman
Genera un botón de colección de Postman con:
Diseño en columnas
Genera este diseño en columnas con:
Diseño en cuadrícula
Se generó este diseño en cuadrícula con:
GitHub Gist
Se generó este Gist con:
Lector de PDF
Genera este lector de PDF con:
Diagramas de flujo y diagramas
Genera este diagrama de flujo exportándolo desde draw.io en formato HTML.
Google Maps
Se generó este mapa usando embedgooglemap.net.