diff --git a/src/components/markdown.component.ts b/src/components/markdown.component.ts
index 987abe4..15b9bb0 100644
--- a/src/components/markdown.component.ts
+++ b/src/components/markdown.component.ts
@@ -10,18 +10,35 @@ import * as marked from 'marked';
 })
 export class MarkdownComponent {
   @Input() markdown: string = ''
+  md: any
   parsedMarkdown: string;
 
-  ngOnChanges() {
-    const md = marked.setOptions({
+  constructor() {
+    // hijack the renderer
+    const renderer = new marked.Renderer();
+    
+    // nest code block within pre tags
+    renderer.code = (code, lang) => {
+      return `<pre class="language-${lang}"><code class="language-${lang}">${code}</code></pre>`;
+    }
+
+    // nest inline code block within pre tags
+    renderer.codespan = (code) => {
+      return `<pre><code>${code}</code></pre>`;
+    }
+    this.md = marked.setOptions({
       gfm: true,
       tables: true,
       breaks: false,
       pedantic: false,
       sanitize: true,
       smartLists: true,
-      smartypants: false
+      smartypants: false,
+      renderer: renderer
     });
-    this.parsedMarkdown = md.parse(this.markdown || '');
+  }
+
+  ngOnChanges() {
+    this.parsedMarkdown = this.md.parse(this.markdown || '');
   }
 }
diff --git a/src/views/components.component.ts b/src/views/components.component.ts
index 9c92e80..75f848b 100644
--- a/src/views/components.component.ts
+++ b/src/views/components.component.ts
@@ -180,5 +180,5 @@ import { ENTRY_MARKDOWN } from '../services'
   `]
 })
 export class ComponentsView {
-  constructor(@Inject(ENTRY_MARKDOWN) public entryMarkdown: string) { }
+  constructor(@Inject(ENTRY_MARKDOWN) public entryMarkdown: string) {}
 }