WMarkDown/WMD/es/doc/modules/code_blocks.w.md

[[post_data {
    "author" : "KyMAN",
    "since" : 20210516,
    "version" : 20210516
}]]
# Códigos de bloque

Los bloques de código o Code Blocks son bloques reservados para código, el cual puede ser visible, como cuando se muestra un fragmento de código para representar un ejemplo o una idea; o para representar algo que es interpretable, como sucede con los diagramas del "mermaid JS". Estos elementos están sujetos a muchos cambios o condiciones por lo que existen multitud de formas de ser llamados, pero todos coinciden en que tengan un inicio y un fin para encapsular el código que se quiere representar. Un par de ejemplos de ambos tipos, tantos de muestreo de código como de interpretación, pueden ser los siguientes:

<table style="width:100%;">
    <thead>
        <tr>
            <th style="width:20%;">Tipo</th>
            <th style="width:40%;">WMarkDown</th>
            <th style="width:40%;">Resultado</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Muestreo</td>
            <td>

---md
```js
console.log("Muestra este Script JS");
```
---

            </td>
            <td>

```js
console.log("Muestra este Script JS");
```

            </td>
        </tr>
        <tr>
            <td>Interpretación</td>
            <td>

---md
```mermaid
graph LR
A["Elemento A"] --> B["Elemento B"]
```
---

            </td>
            <td>

```mermaid
graph LR
A["Elemento A"] --> B["Elemento B"]
```

            </td>
        </tr>
    </tbody>
</table>

Como podemos ver en estos ejemplos, se mostró un bloque de código de un bloque de código en la columna de WMarkDown, eso se llevó a cabo haciendo uso de dos delimitadores diferentes, haciendo una anidación de bloques con distintos cierres. Un ejemplo de anidamiento para hacer un muestreo de un muestro lo vemos a continuación:

<table style="width:100%;">
    <thead>
        <tr>
            <th style="width:50%;">WMarkDown</th>
            <th style="width:50%;">Resultado</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>

'''md
---md
```js
console.log("Muestra este Script JS");
```
---
'''

            </td>
            <td>

---md
```js
console.log("Muestra este Script JS");
```
---

            </td>
        </tr>
    </tbody>
</table>

Estos delimitadores diferentes pueden ser cualquiera de los siguientes:

- <pre style="font-family:monospace;">```</pre><!--```-->
- <pre style="font-family:monospace;">'''</pre>
- <pre style="font-family:monospace;">"""</pre>
- <pre style="font-family:monospace;">---</pre>

A éstos les podemos sumar la facultad de poder crear por cada uno, otro nuevo delimitador separando
sus elementos con espacios.

La existencia de más de un delimitador también viene por el hecho de que los lenguajes de
programación pueden hacer uso de estructuras que puedan solapar este tipo de marcas de texto, como
es el caso de Python con los String UTF8, que impide el uso de los códigos de bloque de triple
comilla doble.

> **NOTA**: MarkDown tiene un Bug con los bloques de código a la hora de ser usados dentro de celdas
de una tabla. En WMarkDown está corregido y se puede hacer uso de elementos HTML sin ningún
problema.

[[html_data {
    "title" : "WMarkDown - Bloques de código",
    "url" : "https://wmarkdown.k3y.pw/es/doc/modules/code_blocks.html",
    "author" : "Tarsier, KyMAN",
    "since" : 20210516,
    "version" : 20210516,
    "key_words" : "Whalers,MarkDown,MediaWiki,WMarkDown,módulo,bloques,componentes,código",
    "description" : "Módulo de bloques de código.",
    "project" : "WMarkDown",
    "logo" : "https://wmarkdown.k3y.pw/images/wmarkdown.png",
    "language" : "es"
}]]