How to add Drop Caps in WordPress without using any plugins

WordPress has plugins for anything that you need to do. Even if you don’t know any coding, you can create wonderful website, however, adding too many plugins clutter your WordPress website.

Also, having too many plugins can cause slowness in your WordPress website and some plugins can misbehave because of interfernce from some other plugin.

Having dropcaps is very basic requirement and I dont think you need to use plugin for this. You can simply copy past following css in Customize->Additional CSS

div.entry-content p:first-child:first-letter {
float:left;
font-size:2.5em;
color: inherit;
margin-right:0.10em;
line-height:90%;
}

 

Adding Syntax Highlighter to Ghost Blog

Using newer things has its own set of disadvantages and ghost blogging platform is no exception. Ghost does not have efficient coding markup tools. They do have coding style which looks like below:

code Inline Code Ctrl/⌘ + Shift + K

Disadvantage of this way to syntax highlighter is that

  • It does not differentiate between syntax of different lanaguges.

  • formatting is very basis. When I was searching for better ways of doing syntax highlighting, I came across a faq on ghost blog which suggested to use prism.js for syntax highlighting.

This is one of the simplest tool that I have came across and you can set it up in few minutes.

Step#1
Download prism.js and prism.css from downaload page..
Before downloading these files, you need to select theme and list of languages to which you need this markup.

I have selected Okaidia theme and all languages (you never know which language you might need to refer, specially for a tech blog)

Step#2
Copy prism.js and prism.css files in following folder respectively

content/themes/theme-name/assets/js  
content/themes/theme-name/assets/css  

Step#3
Now we need to include prism.js and prism.css in default.hbs file of whichever theme you are using.
Include prims.css file in head section, just below other CSS files

<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />  

Include prism.js file in footer section just before end of body section.

<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>  

This tool has some limitations, as you can see, above line is not rendered properly as html. This is because of double double-quotes. This works well if we remove double-quotes.

<script type="text/javascript" src="{{asset 'js/prism.js'}}"></script>  

Step#4
Deploy these updated files on your ghost server and you are all set. Language markup can be done as below:

  • language-javascript
  • language-sql
  • language-css
  • language-bash
  • language-html