Nuevo resaltador de sintaxis: PrismJS

¿Quién habría pensado que este blog viviría lo suficiente para ver un tercer cambio de resaltador de sintaxis? Increíblemente, también Blogger sigue vivo y coleando. La administración de este sitio ha decidido jubilar a highlightjs, que parece seguir con vida, pero ha perdido terreno ante prismjs. Obviamente es una cuestión subjetiva, pero personalmente me he decantado por prism por los siguientes motivos:

  • Logró resaltar mejor los bloques de código VB.NET. Sí, sé que no es un lenguaje muy moderno que digamos, pero lo queremos igual.
  • Se ve mejor: más compacto y con mejor selección de colores. También destaca más palabras.
  • Ofrece una arquitectura extensible, incluyendo plugins para, por ejemplo, agregar números de línea. HighlightJS carece de esto.
  • Todo esto y más, con un tamaño muy pequeño.

Sin más preámbulo, veamos los pasos para empezar a usar prims en Blogger:

  1. En Blogger, seleccionado el blog a modificar, ir a Theme, y en el botón de Customize, clickear el desplegable y seleccionar Edit HTML.
  2. Obtener enlaces CDN para una versión específica de Prism de, por ejemplo, cdnjs. Además de un .css y un .js, recomiendo agregar el .js del plugin autoloader de Prism. Por defecto, Prism carga soporte para 6 lenguajes básicos. El plugin autoloader detecta usos de otros lenguajes y carga sus definiciones automáticamente. En mi caso, agregué dentro de html>head>meta lo siguiente: 
    <link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css' integrity='sha512-mIs9kKbaw6JZFfSuo+MovjU+Ntggfoj8RwAmJbVXQ5mkAX5LlgETQEweFPI18humSPHymTb5iikEOKWF7I8ncQ==' referrerpolicy='no-referrer' rel='stylesheet'/>
<script crossorigin='anonymous' integrity='sha512-7Z9J3l1+EYfeaPKcGXu3MS/7T+w19WtKQY/n+xzmw4hZhJ9tyYmcUS+4QqAlzhicE5LAfMQSF3iFTK9bQdTxXg==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js'/>
<script crossorigin='anonymous' integrity='sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js'/>
  3. Lo único que Prism no puede hacer y HighlightJS sí es detectar automáticamente los lenguajes. Por lo tanto, habrá que buscar todos los bloques pre-code y dentro del tag code, agregar el atributo class="language-xxx". El prefijo language es necesario, y sigue el estándar HTML. El sufijo xxx es el que indica el lenguaje a usar. La lista oficial está aquí.

Comments

Post a Comment

Popular posts from this blog

VB.NET: Raise base class events from a derived class

Spanish version / Versión en Español Say we: Have a class we want to divide into subclasses The future base class has events The refactoring leads us to the need of raising an event declared in the base class, from a derived class. When we try to do point 3, we will get a compile error saying that a derived class cannot raise events from a base class. To get around this, we add a protected method in the base class which encapsulates the RaiseEvent call, and call that method from the derived class using MyBase. This way: In the base class (parameters as needed): Protected Overridable Sub OnMessageGenerated(ByVal NewSender As Object, ByVal NewMessage As String) RaiseEvent MessageGenerated(NewSender, New MessageEventArgs(NewMessage)) End Sub And in the derived class: 'Do stuff 'Raise base class event MyBase.OnMessageGenerated( Me, "Message" ) 'Do more stuff... References: Mark Gilbert post
Keep reading

Apache Kafka - I - High level architecture and concepts

Image
Spanish version / Versión en Español First of all, what is Apache Kafka ? An initial definition for it is "a high-throughput distributed messaging system". Breaking this down a bit: High throughput: One of the main goals of Kafka is to process as much messages per unit of time as possible, in a scalable and fault-tolerant way. For example, LinkedIn , which is where Kafka originated, needs to achieve throughputs in the order of 20 million messages per second and 3 GB of data per second. Distributed messaging system: In a generic distributed system , networked computers work together for a common goal. In Kafka's case, that goal is to send data from points A 1 , A 2 , ... A N , to B 1 , B 2 , ... B M . A common benefit of this kind of system, which is crucial to Kafka's success, is horizontal scalability : the ability to handle higher and higher volumes of data by adding nodes to the system (not to be confused with  vertical scalability , whic
Keep reading

Upgrading Lodash from 3.x to 4.x

Spanish version / Versión en Español There are many breaking changes from version 3.x to 4.x; all changes are detailed in the Lodash changelog . There is also a list of deprecated functions , with a regex you can use to detect usages in your code. However, since it is not an exhaustive list, I will list the changes I encountered when performing my own migration, to help anyone undergoing the same process. Direct renames This section includes functions in which only the name changed, i.e. the arguments and return value are the same. 3.x 4.x contains includes first head rest tail invoke invokeMap padLeft padStart padRight padEnd Direct renames if not using thisArg This section includes functions in which the only change is dropping "thisArg". If you are not using it, you can just rename. If you are using thisArg in 3.x, it can be dropped if you are using iteratee to acce
Keep reading