Renovación y limpieza del blog - Nuevo coloreado de sintaxis

Al pasar a un tema de Blogger más moderno, perdí el coloreado de sintaxis provisto por el plugin Syntax Highlighter de Alex Gorbatchev, proyecto que sigue vivo al día de hoy pero por alguna razón que no logré dilucidar, no funciona con los nuevos temas dinámicos de Blogger.

Investigando un poco, me topé con Highlight JS, y me gustó su simpleza y versatilidad. No tiene números de línea, pero como su creador explica, no son imprescindibles y realmente se ve mucho mejor.

Para instalar Highlight JS en un blog de Blogger, se requieren 3 simples pasos:

  1. Ir a Tema-Editar HTML y agregar links al CSS y JS de HighlightJS dentro de <head>. Por ejemplo, usando los de CDNJS para la versión 9.10: 
    <link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/tomorrow-night.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js'/>
    Yo estoy usando un estilo (Tomorrow Night) que no es el estándar; hay muchos más disponibles en CDNJS.
  2. Agregar, dentro del <body> del template, una llamada para aplicar el coloreado: 
    <script language='javascript'>
   hljs.initHighlightingOnLoad();
</script>
  3. El plugin de Gorbatchev formateaba usando sólo el tag <pre>. HighlighJS usa <code> dentro de <pre>: 
    <pre>
<code>
//Tu código acá
</code>
</pre>
    El lenguaje es reconocido automáticamente por HighlightJS. Pero como eso no es 100% exacto, a veces es necesario especificar el lenguaje. Eso se puede hacer usando el atributo class del tag <code>. La lista de lenguajes está aquí. Por otro lado, HighlightJS trae los lenguajes más comunes por defecto, pero soporta muchos más si se agregan manualmente. Además, es posible agregar lenguajes y estilos: véase la documentación.

Comments

Post a Comment

Popular posts from this blog

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

C++/CLI: Trigger events from C++ native code and handle them in Managed code, Part I

Spanish version / Versión en Español Imagine we want to trigger an event from a native class which has a C++/CLI wrapper as an interface to managed code (C#, VB.NET). And let's deal with the general case in which we desire to pass extra information along with the event, and said information is not inside a CLR basic type, that is one which both native and managed C++ understand (int, float, char, and so on). In the native class, declare, just for convenience, a pointer to function type: typedef <nativeReturnType> ( __stdcall * PFOnEventCallback )( <nativeParameters> ); Still in the native class, declare a field of the type declared in 1): PFOnEventCallback m_fireEvent; In the place in the native class where we want to trigger the event: if( m_fireEvent ) m_fireEvent( <nativeParameters> ); (This suggests you to initialize m_fireEvent to 0, or NULL if you prefer) Now we need a setter for m_...
Keep reading

Traduciendo un custom control de Windows Forms de VB.NET a C#

Versión en inglés / English version No es tan fácil como tirar el código en un traductor , copiar y pegar. Hay ciertos detalles a tener en cuenta, a saber: Una vez creado el nuevo proyecto C#, en vez de crear el .cs y el .Designer.cs a mano, es mejor hacer click derecho al proyecto->Add->User Control. De esta forma, el .cs y el .Designer.cs ya quedan vinculados. Antes de largarse a editar el .cs y el .Designer.cs, abrir el control en vista diseño. Abrir la ventana de Toolbox, agregar un control cualquiera (un Label, por ejemplo) y salvar. Esto generará el .resx del control. Hecho eso, se puede eliminar el control que habíamos agregado. Si el proyecto original usa recursos, o sea que también hay un .resx a nivel proyecto, hay que generar uno. Esto se hace yendo a las propiedades del proyecto, sección Resources. Lo único que veremos será un link que dirá "This project does not contain a default resources file. Click here to create one.". Click allí y listo....
Keep reading