How to Make a Sample Code Block in Ghost Blog
Code blocks and syntax highlighting for technical blogs.
![How to Make a Sample Code Block in Ghost Blog](/content/images/size/w1200/2022/12/03033088-5A11-4DA6-9A4E-47D783B1AF0E_1_201_a.jpeg)
Create a code block
To add a block of code to a post or page, type three backticks (```) followed by the name of the coding language and hit tab
or enter
. For example, to add a block of javascript, write: ```javascript.
The code block will look like this unless you add syntax highlighting:
![](https://www.iangreer.io/content/images/2022/12/Screenshot-2022-12-13-at-6.02.31-PM.png)
With syntax highlighting, the output looks like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js" integrity="sha512-9khQRAUBYEJDCDVP2yw3LRUQvjJ0Pjx0EShmaQjcHa6AXiOv6qHQu9lCAIR8O+/D8FtaCoJ2c0Tf9Xo7hYH01Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-fTl/qcO1VgvKtOMApX2PdZzkziyr2stM65GYPLGuYMnuMm1z2JLJG6XVU7C/mR+E7xBUqCivykuhlzfqxXBXbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Read this guide to add syntax highlighting:
Add Syntax Highlighting to Ghost CMS Code Block
How to add color to a code block in Ghost.
![](https://www.iangreer.io/content/images/2022/12/DD7AAA9B-0AED-466A-82D6-0023D82686AD_1_201_a.jpeg)
Comments ()