Resaltador de sintaxis de código online

En esta página, podrás resaltar la sintaxis de tu código fuente de manera visualmente atractiva, sin recurrir a una sola linea de JavaScript. Utilizando solo CSS y el código escapado, podrás integrar fácilmente tu codigo resaltado en tus publicaciones Blogger.

Usaremos el conocido resaltador highlight.js para transformar el código fuente a uno customizado con clases y automaticamente escapado listo para publicar.

En el cuadro de la izquierda, pegaremos todo el código que nosotros queremos resaltar. Y en el cuadro derecho veremos el resultado, podemos cambiar tanto el lenguaje, como los colores o tema mas abajo.

getComponent() {
  if (!this.component) {
    this.component = new TextEditorComponent({
      element: this,
      mini: this.hasAttribute('mini'),
      updatedSynchronously: this.updatedSynchronously
    })
    this.updateModelFromAttributes()
  }
  return this.component
}

module.exports = document.registerElement('atom-text-editor', {
  prototype: TextEditorElement.prototype
})

Lenguaje Tema A11Y Dark A11Y Light Agate An Old Hope Android Studio Arduino Light Arta Ascetic Atom One Dark Reasonable Atom One Dark Atom One Light Brown Paper CodePen Embed Color Brewer Dark Default Docco Far Foundation GitHub GML Google Code Gradient Dark Gradient Light Grayscale Hybrid IDEA IR Black ISBL Editor Dark ISBL Editor Light Lightfair Lioshi Magula Mono Blue Monokai Sublime Monokai Night Owl NNFX Dark Nord Obsidian Paraiso Dark Paraiso Light Pojoaque PureBasic QtCreator Dark QtCreator Light Rainbow RouterOS School Book Shades of Purple Srcery StackOverflow Dark StackOverflow Light Sunburst Tomorrow Night Blue Tomorrow Night Bright VS VS 2015 Xcode xt256

Por ultimo, solo tenemos que pegar esta linea de codigo en nuestra plantilla, y deberas hacerlo arriba de la etiqueta </head>, en realidad en cualquier parte basta, pero lo mas recomendable es donde te acabo de decir.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">

Listo, ya tenemos nuestro código resaltado. Aca está lo que debes copiar y pegar en tu publicación para tener un lindo código resaltado

<pre><code  class="javascript hljs">getComponent() {
  <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.component) {
    <span class="hljs-keyword">this</span>.component = <span class="hljs-keyword">new</span> TextEditorComponent({
      <span class="hljs-attr">element</span>: <span class="hljs-keyword">this</span>,
      <span class="hljs-attr">mini</span>: <span class="hljs-keyword">this</span>.hasAttribute(<span class="hljs-string">'mini'</span>),
      <span class="hljs-attr">updatedSynchronously</span>: <span class="hljs-keyword">this</span>.updatedSynchronously
    })
    <span class="hljs-keyword">this</span>.updateModelFromAttributes()
  }
  <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.component
}

<span class="hljs-built_in">module</span>.exports = <span class="hljs-built_in">document</span>.registerElement(<span class="hljs-string">'atom-text-editor'</span>, {
  <span class="hljs-attr">prototype</span>: TextEditorElement.prototype
})
</code></pre>