# Add color to code added in posts

**URL:** <https://talk.jekyllrb.com/t/add-color-to-code-added-in-posts/1037>\
**Category:** Help\
**Created:** [October 2, 2017, 9:54am UTC](https://talk.jekyllrb.com/t/add-color-to-code-added-in-posts/1037 "2017-10-02T09:54:44Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [October 2, 2017, 9:54am UTC](https://talk.jekyllrb.com/t/add-color-to-code-added-in-posts/1037/1 "2017-10-02T09:54:45Z")

</div>

how can we add color to the code added in the posts?

I have used this

```auto
var a = 0;
var b = 0;

```

but still in my posts the color of the code is not changing.

---

<div class="post-metadata">

**Author:** ![ashmaroli](https://avatars.discourse-cdn.com/v4/letter/a/df705f/32.png) [@ashmaroli](https://talk.jekyllrb.com/u/ashmaroli)\
**Post date:** [October 2, 2017, 6:26pm UTC](https://talk.jekyllrb.com/t/add-color-to-code-added-in-posts/1037/2 "2017-10-02T18:26:29Z")

</div>

use backticks and the language identifier

````
```javascript

var a = 0;
var b = 0;
```
````

---

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [October 2, 2017, 6:37pm UTC](https://talk.jekyllrb.com/t/add-color-to-code-added-in-posts/1037/3 "2017-10-02T18:37:54Z")

</div>

Tried this too. But still it is not working.

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [October 2, 2017, 7:09pm UTC](https://talk.jekyllrb.com/t/add-color-to-code-added-in-posts/1037/4 "2017-10-02T19:09:15Z")

</div>

I think you need to use a highlighter css file - did you add that to your site?

quick google search came up with this, no idea if it is correct but it looks the same as what I use:

> <https://gist.github.com/demisx/025698a7b5e314a7a4b5>

---

<div class="post-metadata">

**Author:** ![ashmaroli](https://avatars.discourse-cdn.com/v4/letter/a/df705f/32.png) [@ashmaroli](https://talk.jekyllrb.com/u/ashmaroli)\
**Post date:** [October 3, 2017, 3:35am UTC](https://talk.jekyllrb.com/t/add-color-to-code-added-in-posts/1037/5 "2017-10-03T03:35:29Z")

</div>

A syntax-highlighter stylesheet is included within Minima by default… so unless you’re using a different theme, or have overridden `_sass/minima.scss`, you should already have the necessary styles defined… otherwise, refer to @rdyar’s comment above…

---

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [October 3, 2017, 9:06am UTC](https://talk.jekyllrb.com/t/add-color-to-code-added-in-posts/1037/6 "2017-10-03T09:06:35Z")

</div>

I have added the syntax highligher stylesheet. But still it is not getting colored.

For example: This is the code.

```auto
go
func (a Vector) Add(b Vector) Vector {
  return Vector{
    X: a.X + b.X,
    Y: a.Y + b.Y,
    Z: a.Z + b.Z,
  }
}

func TestAdd(t *testing.T) {
  result := Vector{1., 1., 1.}.Add(Vector{2., 2., 2.})
  assert.Equal(t, Vector{3., 3., 3.}, result, "should add correctly")
}

```

and what it look:

![image](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/1X/c94c4797dadd20ed391e8a96b515470c1d04bbd7.png)

---

<div class="post-metadata">

**Author:** ![ashmaroli](https://avatars.discourse-cdn.com/v4/letter/a/df705f/32.png) [@ashmaroli](https://talk.jekyllrb.com/u/ashmaroli)\
**Post date:** [October 3, 2017, 2:26pm UTC](https://talk.jekyllrb.com/t/add-color-to-code-added-in-posts/1037/7 "2017-10-03T14:26:43Z")

</div>

I think we’ll be able to help better if there’s public link to your repository… it could be just a typo somewhere or an incorrect language identifier…

---

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [October 3, 2017, 2:43pm UTC](https://talk.jekyllrb.com/t/add-color-to-code-added-in-posts/1037/8 "2017-10-03T14:43:32Z")

</div>

Sure. Here is the link to the [repo](https://github.com/codecarrotnet/blog).

---

<div class="post-metadata">

**Author:** ![ashmaroli](https://avatars.discourse-cdn.com/v4/letter/a/df705f/32.png) [@ashmaroli](https://talk.jekyllrb.com/u/ashmaroli)\
**Post date:** [October 3, 2017, 3:23pm UTC](https://talk.jekyllrb.com/t/add-color-to-code-added-in-posts/1037/9 "2017-10-03T15:23:55Z")

</div>

Your blog seems to be working fine… code-blocks rouge-ified as expected…, stylesheets detected and imported as expected…

The issue is with the stylesheet itself.  
Many of the span classes have no color-data… just declarations to format the `<span>` as **`bold`**. So you’ve two options now:

1. Search for another related stylesheet
2. Add the colors yourself in tune with your blog’s theme.

---

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [October 3, 2017, 4:27pm UTC](https://talk.jekyllrb.com/t/add-color-to-code-added-in-posts/1037/10 "2017-10-03T16:27:32Z")

</div>

I have checked all files on the internet. It all the same.

---

<div class="post-metadata">

**Author:** ![ashmaroli](https://avatars.discourse-cdn.com/v4/letter/a/df705f/32.png) [@ashmaroli](https://talk.jekyllrb.com/u/ashmaroli)\
**Post date:** [October 3, 2017, 4:45pm UTC](https://talk.jekyllrb.com/t/add-color-to-code-added-in-posts/1037/11 "2017-10-03T16:45:49Z")

</div>

🙂 You know what to do next then… Open up the in-browser **Developer Tools** and use it to add the colors yourselves…

---

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [October 3, 2017, 4:48pm UTC](https://talk.jekyllrb.com/t/add-color-to-code-added-in-posts/1037/12 "2017-10-03T16:48:06Z")

</div>

@ashmaroli. Read this [question](http://talk.jekyllrb.com/t/difference-between-md-and-markdown/1043).

Does it make any difference in the coloring of the syntax by using different file type?

---

<div class="post-metadata">

**Author:** ![ashmaroli](https://avatars.discourse-cdn.com/v4/letter/a/df705f/32.png) [@ashmaroli](https://talk.jekyllrb.com/u/ashmaroli)\
**Post date:** [October 3, 2017, 4:52pm UTC](https://talk.jekyllrb.com/t/add-color-to-code-added-in-posts/1037/13 "2017-10-03T16:52:14Z")

</div>

No, it doesn’t… only the language-identifier passed to Rouge matters

---

<div class="post-metadata">

**Author:** ![yashumittal](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/yashumittal/32/1260_2.png) [@yashumittal](https://talk.jekyllrb.com/u/yashumittal)\
**Post date:** [October 4, 2017, 7:14pm UTC](https://talk.jekyllrb.com/t/add-color-to-code-added-in-posts/1037/14 "2017-10-04T19:14:22Z")

</div>

Instead of using this

```ruby  
```

Will this also work?

```ruby
    {% highlight ruby %}
    def print_hi(name)
      puts "Hi, #{name}"
    end
    print_hi('Tom')
    #=> prints 'Hi, Tom' to STDOUT.
    {% endhighlight %}

```

---

<div class="post-metadata">

**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\
**Post date:** [October 4, 2017, 7:50pm UTC](https://talk.jekyllrb.com/t/add-color-to-code-added-in-posts/1037/15 "2017-10-04T19:50:43Z")

</div>

Yes both work. Using Jekyll’s `{% highlight %}` tag outputs slightly different HTML but has the same affect as using the GFM backtick method.

**`{% highlight %}` method outputs this HTML:**

```auto
<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">def</span> <span class="nf">print_hi</span><span class="p">(</span><span class="nb">name</span><span class="p">)</span>
  <span class="nb">puts</span> <span class="s2">"Hi, </span><span class="si">#{</span><span class="nb">name</span><span class="si">}</span><span class="s2">"</span>
<span class="k">end</span>
<span class="n">print_hi</span><span class="p">(</span><span class="s1">'Tom'</span><span class="p">)</span>
<span class="c1">#=&gt; prints 'Hi, Tom' to STDOUT.</span></code></pre></figure>

```

**3 backticks method outputs this HTML:**

```auto
<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">def</span> <span class="nf">print_hi</span><span class="p">(</span><span class="nb">name</span><span class="p">)</span>
  <span class="nb">puts</span> <span class="s2">"Hi, </span><span class="si">#{</span><span class="nb">name</span><span class="si">}</span><span class="s2">"</span>
<span class="k">end</span>
<span class="n">print_hi</span><span class="p">(</span><span class="s1">'Tom'</span><span class="p">)</span>
<span class="c1">#=&gt; prints 'Hi, Tom' to STDOUT.</span>
</code></pre></div></div>

```

One wraps it in a `figure` element, the other uses a `div` with some slight changes in class names.

To get a color scheme you want it’s a combination of adding the correct language lexer (eg. `ruby`, which appears you’re doing correctly), and adding the appropriate CSS.

If you look at the HTML being outputted above by [Rouge](http://rouge.jneen.net/) you’ll see all kinds of `span` elements wrapping the various parts of your code block. Each has a specific class you’ll need to add `color` declarations to get the coloring you want.

I’m not sure what each class means, but I’m sure if you searched around Rouge/Pygments docs it would explain it.

There’s a bunch of themes out there to serve as a starting point. In theory any of the [styles for Pygments](http://pygments.org/docs/styles/) will work as Rouge is spiritual successor to that. You’re best bet is take the CSS from a style that is close to what you want and adjust as you need.

- [Pygments style gallery](https://help.farbox.com/pygments.html)
- [Pygments built-in styles](https://github.com/richleland/pygments-css)