|
1 |
| -# Resaltar Lenguajes |
| 1 | +# Resaltado de lenguaje |
2 | 2 |
|
3 |
| -**docsify** usa [Prism](https://github.com/PrismJS/prism) para resaltar bloques de código en sus páginas. Por defecto, solo es compatible con CSS, JavaScript y HTML. Puede hacer que **Prism** cargue lenguajes adicionales: |
| 3 | +Docsify utiliza [Prism](https://prismjs.com) para resaltar bloques de código en tus páginas. Prism admite los siguientes lenguajes de forma predeterminada: |
| 4 | + |
| 5 | +- Marcado - `markup`, `html`, `xml`, `svg`, `mathml`, `ssml`, `atom`, `rss` |
| 6 | +- CSS - `css` |
| 7 | +- Tipo C - `clike` |
| 8 | +- JavaScript - `javascript`, `js` |
| 9 | + |
| 10 | +El soporte para [idiomas adicionales](https://prismjs.com/#supported-languages) está disponible cargando los archivos de gramática específicos del idioma [via CDN](https://cdn.jsdelivr.net/npm/prismjs@1/components/): |
| 11 | + |
| 12 | +```html |
| 13 | +<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script> |
| 14 | +<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script> |
| 15 | +``` |
| 16 | + |
| 17 | +!> Esta etiqueta `<script>` debe colocarse después de la etiqueta `<script>` de Docsify para que funcione. |
| 18 | + |
| 19 | +Para habilitar el resaltado de sintaxis, envuelve cada bloque de código en triple comilla invertida con el [lenguaje](https://prismjs.com/#supported-languages) especificado en la primera línea: |
| 20 | + |
| 21 | +```` |
| 22 | +```html |
| 23 | +<p>Este es un párrafo</p> |
| 24 | +<a href="//docsify.js.org/">Docsify</a> |
| 25 | +``` |
| 26 | +
|
| 27 | +```bash |
| 28 | +echo "hola" |
| 29 | +``` |
| 30 | +
|
| 31 | +```php |
| 32 | +function getAdder(int $x): int |
| 33 | +{ |
| 34 | + return 123; |
| 35 | +} |
| 36 | +``` |
| 37 | +```` |
| 38 | + |
| 39 | +El markdown anterior se representará como: |
4 | 40 |
|
5 | 41 | ```html
|
6 |
| -<script src="//unpkg.com/docsify/lib/docsify.min.js"></script> |
7 |
| -<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script> |
8 |
| -<script src="//unpkg.com/prismjs/components/prism-php.min.js"></script> |
| 42 | +<p>Este es un párrafo</p> |
| 43 | +<a href="//docsify.js.org/">Docsify</a> |
| 44 | +``` |
| 45 | + |
| 46 | +```bash |
| 47 | +echo "hola" |
9 | 48 | ```
|
10 | 49 |
|
11 |
| -?> Verifique la lista de [archivos de componentes](https://github.com/PrismJS/prism/tree/gh-pages/components) para más opciones. |
| 50 | +```php |
| 51 | +function getAdder(int $x): int |
| 52 | +{ |
| 53 | + return 123; |
| 54 | +} |
| 55 | +``` |
| 56 | + |
| 57 | +## Resaltado de contenido dinámico |
| 58 | + |
| 59 | +Los bloques de código [creados dinámicamente desde JavaScript](https://docsify.js.org/#/configuration?id=executescript) se pueden resaltar utilizando el método `Prism.highlightElement` de la siguiente manera: |
| 60 | + |
| 61 | +```javascript |
| 62 | +const code = document.createElement('code'); |
| 63 | +code.innerHTML = "console.log('¡Hola, mundo!')"; |
| 64 | +code.setAttribute('class', 'lang-javascript'); |
| 65 | +Prism.highlightElement(code); |
| 66 | +``` |
0 commit comments