WMarkDown/Public/doc/es/manual/code_block.w.md

5.1 KiB

language = es
title_i18n = wmarkdown_title_checks
title_text = Bloques de código - WMarkDown

Bloques de código

Los bloques de código están diseñados para poder mostrar códigos, Scripts, etc. De forma que el texto esté monoespaciado, con conteo de líneas y caracteres, así como visualización del número de línea donde te encuentras y con la posibilidad de ir visiblemente ayudado de un Syntax Highlighter. Básicamente viene siendo un bloque que se generará a nivel visual, a modo de caja donde se incluirá el código dado y formateado de la forma anteriormente descrita.

[!#] Los bloques de código siguen la filosofía de MarkDown por simplicidad a la hora de se implementados. Los bloques de código de MediaWiki son ignorados aquí por el hecho de que acaban siendo bloques HTML, cosa que ya se pueden integrar manualmente.

'''wmd-examples

A continuación se expone un bloque de HTML.

<h3>Ejemplo</h3>
<p>Esto es un ejemplo de <b>HTML</b>.</p>

'''

Estos bloques también pueden ser usados para módulos que requieran de un bloque con las órdenes, parámetros o descripciones necesarias. Dichos módulos son los siguientes:

  • math, maths o !mathjax: El módulo "maths" o de matemáticas nos permite visualizar funciones y operaciones matemáticas a partir de código MathJax a partir de la librería "mathjax.js".
  • mermaid o !mermaidjs: Este módulo se utiliza para representar gráficos, flujos, esquemas, etc. A partir de la librería "mermaid.js".
  • !wmd-examples: Este módulo es específico para WMarkDown y nos permite hacer ejemplos dinámicos contra el cliente de textos formateados en WMarkDown.
  • !wmd-options: Este módulo nos permite especificar las opciones cara un documento WMarkDown, por lo general el título y el código de idioma utilizado.
  • !wmd o !wmarkdown: Vienen siendo bloques especiales que se ponen fuera de lo que son textos WMarkDown que identifican en un texto plano, bloques que han de ser procesados como WMarkDown.

[!!] Estos bloques se procesarán en el cliente pues no afecta inicialmente al SEO para su salida directa en HTML, por lo tanto, éstos aparecerán reflejados en HTML como bloques de código convencionales.

'''wmd-examples

A continuación tenemos un Script JS.

console.log("Esto es un ejemplo de impresión por consola en JavaScript.");

Ahora mostramos un ejemplo de un flujo.

flowchart TD

A["Elemento A"]
B["Elemento B"]
C["Elemento C"]

A --> B
B --> C

Finalmente, mostramos un ejemplo de función matemática.

# Ejemplo hallando el siguiente punto.
(x_3, y_3) = (x_1, y_1) - (x_2, y_2)

'''

También puede ser usado simplemente para representar texto plano.

'''wmd-examples

Esto es un texto plano.
Esto es otro texto plano sin nombre de formato.
Al ser un lenguaje desconocido, éste saldrá también como texto plano.

'''

Para poder representar los bloques de código tenemos varias marcas las cuales son las siguientes:

[[!]]

[| class="wmd-blocks-marks-viewer" |=| Marca |= Compactado | Espaciado | ``` | ` ` ` | ''' | ' ' ' | """ | " " " |]

[!?] ¿Por qué existen varias formas de llamar a los bloques de código? Básicamente por versatilidad pues habrá lenguajes o fragmentos de código que se quieran representar y éstos contengan conjuntos de caracteres que puedan hacer conflicto con el propio bloque de código, por tanto, hay estas opciones para que el usuario pueda elegir entre ellas. Este es el motivo por el cual se pudo ejemplificar los bloques de código en el propio WMarkDown.

Por otro lado, y terminando con los bloques de código, también hay un tipo de bloques de código especiales que son los !wmd o !wmarkdown, que nos sirven para identificar bloques de código WMarkDown para ser procesados dentro de un bloque de texto plano, como se explicó anteriormente. Normalmente se suelen poner en documentos directos como HTML para que éstos sean procesados parcialmente y ahorrar proceso y recursos, así como posibles errores y complicaciones.

'''html

Ejemplo de incrustación

Esto es un bloque de código HTML normal.

" " "wmd

Ejemplo

Aquí empieza un bloque de código WMarkDown el cual será procesado en HTML, pero se ignorará lo que esté fuera de este bloque.

Ejemplo de bloque dentro de otro bloque, pero éste será procesado como bloque de código WMarkDown.

" " "

Esto ya está fuera del dominio anterior.

'''

Los bloques de código incrustados, como el que vemos en este ejemplo también pueden ir encapsulados entre dos comentarios XML.

<!-- [[!WMD]] -->

Esto nos permite no salir del formato HTML ni XML en el IDE.