¿Cómo doy formato html a líneas de código html en la Azer DevOps Wiki?

Question

Hola, es que cuando utilizo la opción de bloque de código, luego no se visualiza en el lado derecho de la pantalla, se ve como solo el código, y lo que intento hacer es que en el lado derecho se visualice como una Wiki, por ejemplo con el siguiente código no hay líneas en blanco entre los elementos y se visualiza medianamente bien en el lado derecho:

<div style="background-color: #b7f9f8; width:100vw; height: 100vh; width:100vw; display: flex;">
  <p style="font-weight: bold; background-color: #b7ddf9; width:37vw">Contenedor Flotante con Background.</p>
  <div
    style="display: flex; right:0px; width:16vw; background: #e3f2fd; padding: 10px; margin: 10px; border: 1px solid #0078d4;">
    <h3 style="color: #d32f2f; margin-top: 0;">⚠️ Importante</h3>
    <p>Azure DevOps no soporta:</p>
    <ul style="margin: 10px 0;">
      <li>Ejecución de JavaScript</li>
      <li>CSS externo</li>
      <li>Elementos interactivos complejos</li>
    </ul>
  </div>
  <p style="font-weight: bold; background-color: #b7ddf9; width:37vw">La inserción de una tabla de contenido con enlaces
    a la misma Wiki es algo necesario en una Wiki, a continuación una tabla a las primeras tres páginas.</p>
  <div
    style="display: flex; right:0px; width:16vw; background: #e3f2fd; padding: 10px; margin: 10px; border: 1px solid #0078d4;">
    <h3 style="color: Red; margin-top: 0;font-weight: bold;">Tabla de contenido</h3>
    <p>Azure DevOps no soporta:</p>
    <ol style="margin: 10px 0;">
      <li><a href="#">Pequeñas interacciones</a></li>
      <li>CSS externo</li>
      <li>Elementos interactivos complejos</li>
      </ul>
  </div>
</div>

Adjunto imagen de como se visualiza el código (Se ve relativamente bien y necesito que se vea más o menos así).

Pero si pongo ese código con el ```html ``` y después de pegar el código en el medio de estos caracteres borro ```html
``` se queda viendo a la derecha (en la previsualización de la página de la Wiki) todo desacomodado y muy mal, es como si el interprete de la Wiki tomara los espacios al final de cada etiqueta de cierre como una línea completa de espacio blanco. Me gustaría saber si hay forma de que al pegar el código no se vea mal (mal es con espacios en blanco entre líneas y el código todo separado). Gracias.

Answer 1

Hola de nuevo KEVIN ALEXANDER JARAMILLO GIRALDO,

¡Bienvenido(a) a Microsoft Q&A!

Revisando el código que compartiste, parece que este ya está en HTML por lo cual poniendo las comillas no es necesario y probándolo en mi lado, este me funciona como lo presentaste en la imagen. Adicionalmente, me puedes proporcionar una imagen de cómo se te ve a ti cuando usas las comillas y cuando no las usas?

Quedo a la espera de tu respuesta.

Saludos,

Gao

---

Si esta respuesta resolvió tu consulta, por favor haz clic en 'Aceptar respuesta'. Esto nos ayuda a mejorar continuamente la calidad y relevancia de nuestras soluciones.