Add Code Syntax Highlighting to your Ghost blogging site

If you have followed my posts about setting up Ghost blogging site on Windows Azure and adding Disqus comment and changing your Ghost site theme, you probably notice that code block that comes with Ghost is very plain and has no syntax highlighting.

019-Code-Block

Don’t worry, you can easily add syntax highlighting to your ghost site. There are many ways to do that, but in this post, I will use google-code-prettify.

In this sample, I use the default casper theme, so what I need to do is to add

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

to content/themes/casper/default.hbs (NOTE: put where the main script tags are. Other themes might require you to put the script tag above in different line). As usual, I will just use Visual Studio Online to update the code.

image

However, instead of using 4 spaces of indentation to create a code block, you will need to put something that is similar to GitHub Flavored Markdown. Here are samples for C# and F# code respectively (NOTE: Highlighting also works with other popular languages like JavaScript, XML, C++, and so on).

image

And here is out post with nice code syntax highlighting for both C# and F# code.

image

Happy Blogging!

Advertisements

Changing Ghost theme and add Disqus comment

Last post, we have set up the Ghost blogging site on Windows Azure. In this post, we will continue customizing our Ghost site by changing the theme as well as add Disqus comment.

By changing the theme, you can either fork the default casper theme and modify it or you can look for a new theme at the Ghost’s market place.

008-Marketplace

Basically, what we have to do is to download the theme and copy the whole folder to content/themes folder.

To copy files to our Windows Azure web site, the easiest way is to set up your deployment credentials if you haven’t done it already and use FTP client (like SmartFTP or Filezilla) to copy the theme folder.

Once you copy the theme folder (you might need to refresh the setting page), and you should see those new themes.

012-Select-N-Coded-Theme

Here is the N-Coded theme.

013-After-Theme-Change

 

Ghost doesn’t come with commenting capability. However, we could easily add Disqus comment to our blogging site. With Disqus, you can moderate commenting on any of your sites.

First, let’s go to disqus site and add your blogging site information.

014-Add-Disqus

 

For Ghost, select the Universal Code.

015-Disqus-Universal

Then, Disqus should give you the HTML and JavaScript that you can copy and paste to your web site.

image

 

For Ghost, what we need to do is to copy the code block to the post.hbs in the theme folder. In this example, we will copy the code block into between {{/post}} and </article> in the file content/themes/N-Coded/post.hbs. If you change the theme later, don’t forget to copy the code block to file in the new theme.

017-Add-Disqus-N-Coded

 

In the above screenshot, I use the Visual Studio Online or “Monaco” which can be integrated with your Windows Azure web site. However, you can still modify the theme file on your machine and upload it via FTP.

Now you should see the Disqus comment section under your post!

018-Post-with-Disqus

I think I like Ghost more and more. Hopefully, I have more cool stuff about it to share in the future posts.

Happy New Year!

Set up Ghost blogging site on Windows Azure Websites

Only one desktop application that I miss on Windows RT is the Windows Live Writer. WLW works well with blogging sites like WordPress and making writing blog post a breeze.

While monitoring my twitter feed talking about WLW, Scott Hanselman has mentioned Ghost and MiniBlog which is a dedicated blogging platforms. Both Ghost and MiniBlog looks great to me, but I am interested in markdown and node.js, so I am trying Ghost first.

(By the way, there is nothing wrong with WordPress in my opinion and I am posting this blog post to WordPress using WLW.)

Ghost is an open source blogging platform built on node.js. You can install it locally on Windows, Linux or Mac to try it out. If you have Windows Azure account (or plan to create one), I will show you how to create a Ghost site the easy way. If you are up to challenges, you can also do it the hard ways.

Let’s start

1. First, we create an Azure Web site and select “From Gallery” option.

001-CreateAzureWebsite

2. You should be able to select Ghost on the list. It’s currently version 0.3.3, but version 0.4 should be released anytime soon. (UPDATE: As of 1/29/2014, Ghost 0.4 is available on Azure’s Gallery now!)

002-Ghost

After you select Ghost, you will need to specify Azure web site and Ghost configuration. As of now, email is required so Ghost can send reset password email only.

003-ConfigureGhost

3. You should have the ghost site ready now (so easy :-)).

004-Ghost-Welcome

4. Great! But your job is not done yet. You need to go to [your site]/ghost and set up an admin account.

005-Ghost-Admin

Once you have an account, you can look around the admin pages.

006-Ghost-Admin-002

5. And here is my favorite part about Ghost, the side-by-side Markdown editor. Let’s write and publish something.

007-ghost-edit-publish

That’s it. Creating a Ghost site on Windows Azure is pretty easy. You could have the Ghost site up in less than 10 minutes. And the best part, you can have 10 web sites on Windows Azure free 🙂

Next time, I will show you how you can change the site theme and allow comments on your ghost site. Happy New Year!

UPDATE: I have add more posts about Ghost if you are interested to see more:

Changing Ghost theme and add Disqus comment

Add Code Syntax Highlighting to your Ghost blogging site

Missing Azure Cloud Project Template in Visual Studio 2012

It’s late at night, and you couldn’t sleep. So you just want to try WindowsAzure. You, a .NET developer, then downloaded and installed the Windows Azure SDK for .NET. Next, you opened Visual Studio 2012 RC and couldn’t find any project template for Windows Azure.

image

What’s wrong? It turned out that you just need to select .NET Framework 4.0 instead (the small sentence did give some hint though).

image

Now you should see the “Windows Azure Cloud Service” template and create any Azure role you want. Get some coffee (soda or beer) and enjoy coding!

image

image

Local LightSwitch app and Windows Azure SQL Databases

Windows Azure, briefly, is a Microsoft public cloud platform that can be used to build and host web sites, virtual machines, SQL Server database, cloud services (i.e., worker and web roles), blob storage.  LightSwitch is a simple development tool built on top of familiar .NET technologies like VB/C#, Silverlight, and SQL Server. It allows development of line-of-business n-tier application very rapidly.

In this post, I will show how to create a local LightSwitch app which connects to a SQL Database in Windows Azure cloud.

First, we start by creating a SQL Server on Windows Azure. I go to Windows Azure portal then add new SQL Databases. If no SQL server has been created already, Azure will also create a new server.

image

After the database has been created, I can go to the dashboard to check the database status and get information of the database such as connection string. In my case, I want to have my machine to be able to connect to the SQL server, so I have to modify the firewall rule to let my IP address goes through. Azure does show my IP address which is very convenient.

Azure also provides me a very nice Silverlight-based SQL Azure Management Portal allowing me to manage the database online.

image

Indeed, the tool lets me create database tables, queries, and so on. I create a simple table called Blog with Title and Url columns which will be used with my local LightSwitch client. There is a lot of improvement alone from the portal/tool standpoint in the new Windows Azure. Now I am done with Azure side.

image

Next, I create a LightSwitch project and link to the external SQL Azure database has been created above. In the SQL Azure management portal, I can get the connection strings. It provide several types of connection strings, but what I need is only the protocol, server name and port in ADO.NET connection string. My database is displayed in the screen below after the server and login information are added. I can now select the Blog table that has been created with SQL Azure management portal.

image

image

In the LightSwitch Data designer, I now see Blog table. To utilize LightSwitch built-in specific URL validation, I can change the data type of the Url to Web Address, so LightSwitch can provide me more specific validation for this field. In this example, I create a screen using Editable Grid Screen template which creates a simple editable grid layout. LightSwitch also provides a designer allowing me to modify the screen layout.

image

image

image

My sample application is basically done. There are several ways to publish a LightSwitch application. In this post, I publish the LightSwitch application as a local desktop application. I can deploy my application as a web (Silverlight) application and let Windows Azure hosts it too. (Windows Azure SDK has to be installed.)

Once I deploy and install the application on my machine, I can now add the records to the Blog table.

image

Now, I go back to SQL Azure management portal, and I will see the record that I just added.

image

As you see, this is very effortless and no code at all. In few minutes, I now have a local Silverlight application that talks with SQL Azure database. Hosting database in the cloud also allows you to focus and enjoy more on the application itself instead of worrying about setting up a server, networking, OS, database, and so on!