vendredi 15 janvier 2016

How to use Objective-C and Swift snippets on Blogger

If you're like me and starting a blog about software engineering, your first bump on the road to success will be the publication of code snippets in your articles. Those little bits of code always come in handy when arrives the time of giving examples :

func foo(){
    print("this is just a little bit of code")
}

First, you need to choose a good syntax highlighter that you're going to use on your blog pages. Personally,  I chose to work with PrismJs. It is lightweight and doesn't add a self-promotional link to each snippet which I fear may be annoying from the reader point of view. However, it doesn't display the line numbers.

1) First download the CSS and Javascript files on this page. You have to select a theme for your snippets and the languages you will need to render.

2) In order for the reader's browser to parse these files, they need to be stored somewhere accessible publicly. The speed of the server holding them is essential for your blog pages to be rendered quickly.
The easiest solution I found is to upload them on google drive. There is a complete tutorial on how to make them public on this blog
EDIT 19/08/2016 : This solution won't be valid anymore as Google is dropping the hosting feature on Drive to promote his Firebase solution. You can give it a try but for me it seemed a little over-powered to just serve a CSS and a javascript file. Instead I used Dropbox file sharing feature.

In order to do that, you need to register and create a Dropbox account. 
- Drag and drop your CSS & Javascript files in the Dropbox root folder (on this page https://www.dropbox.com/home). 
- Right-click on each file to share it. Create the link and you should en dup with an URL that looks like this : 
https://www.dropbox.com/s/av1jmgqj5glwgny/prism.css?dl=0
- Replace "www.dropbox.com" with "dl.dropboxusercontent.com" :  https://dl.dropboxusercontent.com/s/av1jmgqj5glwgny/prism.css?dl=0 

You have the addresses of your CSS and JS files ;)

3) Now that the files are online, you can reference them in the template file of your blog. To do that, just go to the "template" section of your blog settings. Hit the "modify HTML content" and add those two lines with your Dropbox file URLs at the end of the head section (before </head> tag)

<link href='your CSS file URL goes here' rel='stylesheet'/>
<script src='your Javascript file URL goes here'/>

4) In your articles, to put code snippets, you must be in HTML mode (upper left corner) and format your code as follows :

<pre><code class="language-swift">func foo(){
    print("this is just a little bit of code")
}</code></pre>

which is the code I used to produce the snippet at the top of this article. The "class" attribute of the "code" tag must respect the pattern language-**** , **** being the language of your snippet (objectivec, swift, html, etc...)

That's it for this short tutorial. I hope it was useful to you. If you have any question, don't hesitate and ask in the comments or send me a message ;)

2 commentaires:

  1. Hi Eric,

    I did exactly like what you said in the post but not getting the looks as it should...

    Could you take a look at my blog and see what's wrong?
    http://machoshrimp.blogspot.com/

    RépondreSupprimer
    Réponses
    1. Hi David,

      Thanks for the comment ! I don't see the lines in the head tag where you specify the css and Javascript files (step 3 in the tuto). Could you check if you saved the modifications to the template ?

      Hope it helps ;)


      Supprimer