{"id":27681,"date":"2021-05-13T11:30:00","date_gmt":"2021-05-13T08:30:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27681"},"modified":"2021-10-17T17:11:38","modified_gmt":"2021-10-17T14:11:38","slug":"prism-un-resaltador-de-sintaxis-bien-hecho-para-su-sitio-web","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/prism-un-resaltador-de-sintaxis-bien-hecho-para-su-sitio-web\/","title":{"rendered":"PRISM: un resaltador de sintaxis bien hecho para su sitio web"},"content":{"rendered":"<p>Si est\u00e1 ejecutando un blog de programaci\u00f3n o un sitio web que explica c\u00f3mo codificar, debe mostrar el c\u00f3digo en sus p\u00e1ginas web. Sus visitantes prestan atenci\u00f3n a su c\u00f3digo escrito y aprenden de \u00e9l. Debido a esto, debe mostrar su c\u00f3digo de manera agradable en su sitio web, lo que ayuda a sus usuarios a leerlo f\u00e1cilmente. Tambi\u00e9n brinda una mejor experiencia de usuario a los visitantes de su sitio.<\/p>\n<p>En este blog, estamos usando un complemento de WordPress <a href=\"https:\/\/wordpress.org\/plugins\/syntaxhighlighter\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">SyntaxHighlighter Evolved<\/a> para resaltar la sintaxis del c\u00f3digo. Sin embargo, en este art\u00edculo no hablamos de este complemento de WordPress. En cambio, nos gustar\u00eda llamar la atenci\u00f3n de nuestros visitantes sobre <a href=\"https:\/\/prismjs.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">PRISM,<\/a> que es un resaltador de sintaxis ampliamente utilizado en miles de sitios web.<\/p>\n<p>Los blogs m\u00e1s populares que utilizan PRISM son Smashing Magazine, CSS-TRICKS, SitePoint. Si est\u00e1 buscando la soluci\u00f3n sobre c\u00f3mo usar el resaltador de sintaxis, siga leyendo.<\/p>\n<h3>Instalaci\u00f3n<\/h3>\n<p>Para usar el resaltador de c\u00f3digo PRISM, debe incluir su JS y CSS en su sitio web. PRISM le permite personalizar sus opciones en cuanto a tema e idioma. Dir\u00edgete a la <a href=\"https:\/\/prismjs.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">p\u00e1gina de inicio de PRISM<\/a> y <a href=\"https:\/\/prismjs.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">haz<\/a> clic en el &#8216;bot\u00f3n Descargar&#8217;.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211618250b.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211618250b.png\" alt=\"PRISM: un resaltador de sintaxis bien hecho para su sitio web\" ><\/a><\/p>\n<p>En la p\u00e1gina siguiente, elija el tema que se adapte a su sitio web. En la secci\u00f3n Idiomas, seleccione los idiomas que ense\u00f1a su sitio web. Aqu\u00ed, recomendamos seleccionar solo los idiomas que se requieren. De lo contrario, los archivos JS y CSS de su PRISM ocupar\u00e1n un espacio innecesario.<\/p>\n<p>Una vez que haya seleccionado sus opciones, despl\u00e1cese hacia abajo y descargue sus archivos JS y CSS personalizados por separado.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211631b429.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211631b429.png\" alt=\"PRISM: un resaltador de sintaxis bien hecho para su sitio web\" ><\/a><\/p>\n<h3>C\u00f3mo utilizar el resaltador de sintaxis<\/h3>\n<p>Hemos descargado archivos JS y CSS que resaltar\u00e1n la sintaxis de nuestro c\u00f3digo. Lo siguiente que debe ver es c\u00f3mo usarlo en su c\u00f3digo real mientras se muestra en p\u00e1ginas web.<\/p>\n<p>Al principio, debe incluir estos archivos descargados en su sitio web.<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0&lt;link href=\"css\/prism.css\" rel=\"stylesheet\" \/&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\u00a0\u00a0\u00a0\u00a0...\n\u00a0\u00a0\u00a0\u00a0&lt;script src=\"js\/prism.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>A continuaci\u00f3n, PRISM proporciona una clase \u00fanica para cada idioma admitido que tenemos que usar al agregar la sintaxis del idioma. Por ejemplo, si escribe un c\u00f3digo PHP, debe ajustar su c\u00f3digo PHP de la siguiente manera.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211641e7e9.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211641e7e9.png\" alt=\"PRISM: un resaltador de sintaxis bien hecho para su sitio web\" ><\/a><\/p>\n<p>Observe que hemos usado &quot;&lt;? Php&quot; en lugar de &quot;&lt;? Php&quot;. Mientras usa PRISM, debe usar caracteres <code>&lt;<\/code>y <code>&gt;<\/code>para &#8216;&lt;&#8216; y &#8216;&gt;&#8217; respectivamente. Ahora, si revisa su p\u00e1gina web, deber\u00eda ver su c\u00f3digo PHP algo como a continuaci\u00f3n captura de pantalla.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211641e7e9.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211641e7e9.png\" alt=\"PRISM: un resaltador de sintaxis bien hecho para su sitio web\" ><\/a><\/p>\n<p>Para escribir un c\u00f3digo CSS, debe usar class <code>language-css<\/code>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211641e7e9.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211641e7e9.png\" alt=\"PRISM: un resaltador de sintaxis bien hecho para su sitio web\" ><\/a><\/p>\n<p>Este c\u00f3digo CSS se mostrar\u00e1 en su sitio web de la siguiente manera:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211641e7e9.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/04\/post-20630-608211641e7e9.png\" alt=\"PRISM: un resaltador de sintaxis bien hecho para su sitio web\" ><\/a><\/p>\n<p>De la misma manera para la sintaxis HTML y JavaScript, debe usar clases <code>language-markup<\/code>y <code>language-js<\/code>respectivamente.<\/p>\n<p>Para obtener la lista de idiomas admitidos y sus clases, consulte este <a href=\"https:\/\/prismjs.com\/index.html#supported-languages\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">enlace<\/a>.<\/p>\n<h3>Conclusi\u00f3n<\/h3>\n<p>En este art\u00edculo, le mostramos c\u00f3mo instalar y utilizar el resaltador de sintaxis PRISM en su sitio web. Agrega una apariencia agradable a la sintaxis de su c\u00f3digo, lo que brinda una mejor experiencia de usuario para sus visitantes. Alternativamente, tambi\u00e9n puede consultar el complemento de WordPress <a href=\"https:\/\/wordpress.org\/plugins\/syntaxhighlighter\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">SyntaxHighlighter Evolved<\/a> que estamos usando en nuestro blog.<\/p>\n<h4>Art\u00edculos relacionados<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/como-dividir-la-terminal-en-el-sistema-operativo-windows\/\" title=\"C\u00f3mo dividir la terminal en el sistema operativo Windows\">C\u00f3mo dividir la terminal en el sistema operativo Windows<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/extension-ftp-sftp-para-visual-studio-code\/\" title=\"Extensi\u00f3n FTP \/ SFTP para Visual Studio Code\">Extensi\u00f3n FTP \/ SFTP para Visual Studio Code<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/como-descargar-un-video-de-youtube-en-el-sistema-operativo-windows\/\"  descargar un video de YouTube en el sistema operativo br>\u00bb >C\u00f3mo descargar un video de YouTube en el sistema operativo Windows<br \/><\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo le mostramos c\u00f3mo instalar y usar el resaltador de sintaxis PRISM. Cuando resalta la sintaxis de su c\u00f3digo, le da un aspecto agradable a su c\u00f3digo y<\/p>\n","protected":false},"author":1,"featured_media":20631,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[410],"tags":[849],"class_list":["post-27681","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diverso","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/27681","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=27681"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/27681\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/20631"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=27681"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=27681"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=27681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}