# Github pages markdown code block in box

**URL:** <https://talk.jekyllrb.com/t/github-pages-markdown-code-block-in-box/3368>\
**Category:** Help\
**Created:** [September 20, 2019, 12:27am UTC](https://talk.jekyllrb.com/t/github-pages-markdown-code-block-in-box/3368 "2019-09-20T00:27:34Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![CarltonW](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@CarltonW](https://talk.jekyllrb.com/u/CarltonW)\
**Post date:** [September 20, 2019, 12:27am UTC](https://talk.jekyllrb.com/t/github-pages-markdown-code-block-in-box/3368/1 "2019-09-20T00:27:34Z")

</div>

I’m using three back ticks for code examples, but the code is rendering with a box around it. How can i render the code differently?

Here is an example page: [https://carltonw.github.io/how-to-setup-wsl-on-windows-10/](https://carltonw.github.io/how-to-setup-wsl-on-windows-10/)

---

<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:** [September 20, 2019, 3:13am UTC](https://talk.jekyllrb.com/t/github-pages-markdown-code-block-in-box/3368/2 "2019-09-20T03:13:49Z")

</div>

this is in your css:

```auto
.highlighter-rouge {
    color: #ce887b;
    font-weight: 400;
    border: 1px solid #607D8B;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 0.1rem 0.5rem;
}

```

---

<div class="post-metadata">

**Author:** ![CarltonW](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@CarltonW](https://talk.jekyllrb.com/u/CarltonW)\
**Post date:** [September 20, 2019, 12:14pm UTC](https://talk.jekyllrb.com/t/github-pages-markdown-code-block-in-box/3368/3 "2019-09-20T12:14:10Z")

</div>

I’m new to markdown. Do I just take out the rouge plugin?

---

<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:** [September 20, 2019, 3:07pm UTC](https://talk.jekyllrb.com/t/github-pages-markdown-code-block-in-box/3368/4 "2019-09-20T15:07:26Z")

</div>

no - it’s not a markdown issue it is a css issue. You can edit your css to remove the border info and it should go away.

---

<div class="post-metadata">

**Author:** ![CarltonW](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@CarltonW](https://talk.jekyllrb.com/u/CarltonW)\
**Post date:** [September 20, 2019, 3:09pm UTC](https://talk.jekyllrb.com/t/github-pages-markdown-code-block-in-box/3368/5 "2019-09-20T15:09:55Z")

</div>

Thanks rdyar -  
I just found it in my Main.css file and change it to this:

> .highlighter-rouge {  
> color: #532922;  
> background-color: #98cfd6;  
> font-weight: 400;  
> border: none solid #607D8B;  
> -webkit-border-radius: none;  
> border-radius: none;  
> padding: 0.1rem 0.5rem;  
> }