To nicer display code blocks in your StoryChief articles, you can integrate libraries such as highlight.js or prism.js into your website. These tools transform dull code snippets into vibrant, well-structured pieces that are easier to read and understand.
Why use code highlighting?
Improves readability: A colourful and structured display makes code easier to follow.
Enhances learning: Visual differentiation helps with understanding complex logic.
Professional appearance: Elevates the look of your content, giving it a polished and professional feel.
The guide below is one way of adding prism.js to a website with CDN (https://cdnjs.com/libraries/prism), yet adding the JS directly to the website is also possible.
Start adding code highlighting on your website
Step 1. Add CSS for styling
Include the following CSS in the <head> tag of your website. This will provide the necessary styling for your code blocks.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism-tomorrow.min.css" />
Step 2. Add JavaScript libraries
Place these scripts just before the closing </body> tag. They are essential to execute the code highlighting functionality.
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/unescaped-markup/prism-unescaped-markup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/toolbar/prism-toolbar.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
Step 3. Initialize code highlighting through the library with the following script. This will apply the highlighting to all code blocks on the page.
<script>
hljs.highlightAll();
</script>
Step 4. Load scripts asynchronously
To enhance performance, load the JavaScript files asynchronously. This allows the rest of the page to load without waiting for these scripts to finish.
<script async src="..."></script>
Conclusion
By following these straightforward steps, you can significantly improve the visual appeal of code in your articles. This small enhancement can make a big difference for developers and non-developers alike, ensuring that your content is both informative and engaging.
2. Add code
If you need your code to be shown in a full block, use the code block icon or press CTRL/CMD + SHIFT + J.
Alternatively, you can start a new line and type ``` (3x backtick) to begin. You can now type your code. Press Enter when you are finished to have it formatted as a code block. Use Shift+Enter to add a new line of code and Enter again to finish.
When typing the code, there's an autodetect for the language, but it's also possible to predefine the code language.
The codeblock is displayed in a <pre><code></code></pre> block with a class that also contains the code language for further tweaking of the display:
