sábado, 10 de julio de 2021

How to format code snippets in blogger posts (July 2021)

If you want to show code snippets in your blog like this one:

var edad = 17;

  if (edad >= 18) {
    print('Es mayor de edad');
  } else {
    print('Es menor de edad');
  }

You can use highlight.js. To add it to your blog you must edit the HTML:

Once you are inside the HTML editor add the next lines of code:

<link href='https://unpkg.com/@highlightjs/cdn-assets@11.0.1/styles/default.min.css' rel='stylesheet'/>
<script src='https://unpkg.com/@highlightjs/cdn-assets@11.0.1/highlight.min.js'/>
<script>
hljs.configure({cssSelector: &quot;code&quot;});
hljs.highlightAll();
</script>

The previous code has to be added just before the <head> tag. Check the next image:

Now the code snippets that you want to highlight must be inside the tags <pre><code></code></pre>. If you want to write inline code snippets use the tag <code></code>.

Example: The code in the beginning of this post has to be written like this::

<pre><code>
var edad = 17;
if (edad >= 18) {
	print('Es mayor de edad');
} else {
	print('Es menor de edad');
}
</code></pre>

It will look like this in the editor:

Thanks for reading this article, I hope it can help you to improve your blogs.

    

0 comments:

Publicar un comentario

Entradas populares