Escribe tu contenido

Formato Markdown y HTML

La mayor parte del contenido de DevSite se escribe en Markdown, que es un formato de escritura diseñado para ser simple y legible para los humanos en texto sin formato. DevSite convierte automáticamente Markdown a HTML para mostrarlo en la Web.

Para conocer el equivalente de Markdown específico de Google para los elementos HTML comunes, usa la hoja de referencia en go/g3mark-cheat. Puedes acceder a la documentación completa de Markdown de Google, también llamado CommonMark, aquí.

Estos son algunos ejemplos:

HTML Markdown
<b>bold text</b>
<strong>bold text</strong>		 **bold text**
<i>italic text</i>
<em>italic text</em>		 *italic text*
<h2>Heading 2</h2>
<h3>Heading 3</h3>		 ## Heading 2
### Heading 3
<a href="url.com">Link</a> [Link](url.com)
<p>paragraph</p> Paragraph
<ol>
  <li>Ordered list first item</li>
  <li>Second item</li>
</ol>		 1. Ordered list first item
1. Second item
1. Third item
<ul>
<li>Unordered list first item</li>
  <ul>
    <li>Nested list item</li>
  </ul>
<li>Second item</li>
</ul>		 * Unordered list first item
    * Nested item (indent 4-spaces)
* Second item

Cuándo usar HTML en lugar de Markdown

Hay ciertos elementos que no escribimos con Markdown, incluidos los siguientes:

  • Archivos de inclusión: Todos los archivos de inclusión deben ser archivos HTML y, por lo tanto, no deben incluir ningún elemento escrito en Markdown. Para obtener orientación sobre cómo crear archivos de inclusión, consulta Cómo reutilizar contenido en varias páginas.

  • Tablas: Las tablas de Markdown pueden ser difíciles de formatear y mantener, por lo que usamos HTML para las tablas, incluso en los archivos de Markdown.

  • Imágenes: El uso de HTML para las imágenes permite una mayor flexibilidad en cuanto al formato y la posición de las imágenes. Consulta la guía de publicación de DevSite para obtener información sobre las imágenes.

  • Zippies: Los Zippies, conocidos como widgets desplegables en DevSite, deben estar en HTML y encerrados en una etiqueta <div>.

Formatos de contenido comunes

Sigue los lineamientos sobre vínculos para saber cuándo abrir vínculos en la misma pestaña y cuándo en una nueva. Si necesitas abrir un vínculo en una pestaña nueva, puedes darle formato de las siguientes maneras:

Markdown

[Accessible content](/style/accessibility){:target="_blank"}

HTML

<a href="/style/accessibility" target="_blank">Accessible content</a>

Tablas

Para conocer los tipos de tablas que ofrece DevSite y su código HTML correspondiente, consulta la guía de publicación de DevSite para Tablas.

Sugerencias:

  • Si necesitas que tu tabla no tenga bordes, usa class="columns".

  • Si necesitas que tu tabla tenga relleno y líneas divisorias (como esta página), usa class="columns extra-padding" y etiquetas <hr> en una fila separada entre las filas de contenido.

Secciones desplegables

En Workspace, usamos la clase arrow-icon para aplicar estilo al elemento desplegable. A continuación, se muestra un ejemplo de un widget comprimible para Workspace:

<div>
  <devsite-expandable class="arrow-icon" id="UNIQUE_ZIPPY_ID">
    <h4 class="showalways">ZIPPY_HEADING</h4>
    <div>
      YOUR_CONTENT
    </div>
  </devsite-expandable>
</div>

Para usar esta muestra, reemplaza las siguientes variables:

  • UNIQUE_ZIPPY_ID: Ingresa un ID descriptivo y único para que puedas apuntar directamente al zippy, por ejemplo, direct-admin-access.
  • ZIPPY_HEADING: Ingresa el texto que el usuario debería ver antes de expandir el zippy.
  • YOUR_CONTENT: Ingresa el contenido que el usuario debería ver cuando se expanda el zippy.

Para obtener más información sobre el widget expandible de DevSite, consulta la guía de publicación de DevSite, Widgets: Expandible.

Incluir contenido compartido

Para reutilizar contenido en varias páginas, puedes usar includes, que es la versión de DevSite para usar fragmentos en varios artículos en Composer.

Para obtener orientación sobre cómo crear archivos de inclusión y usar inclusiones en tu contenido, consulta Cómo reutilizar contenido en varias páginas.

Cómo agregar anclajes personalizados a los encabezados

DevSite crea un atributo de ID HTML para cada encabezado. Para mantener la coherencia en caso de que cambie el encabezado, puedes agregar un ID de anclaje personalizado a un encabezado agregando {:#your-id} junto al texto del encabezado, por ejemplo:

## Apply filters to your search results {:#apply-filters}

Sugerencia: Para crear automáticamente IDs de anclaje personalizados para todos los encabezados de un archivo, presiona Comando (⌘) + H (Ctrl + H en Windows). No se cambiarán los IDs de anclaje personalizados existentes.

Para obtener más información, consulta la guía de publicación de DevSite para los IDs de encabezado.