/ Javascript & Node.js

Ghost blog with Prism.js - syntax highlighting in your ghost blog

Comments

Go to your ghost blog administration interface section Code injection
https://www.your-ghost-blog-url/ghost/#/settings/code-injection/

Add these line in the header section:

<link href="//cdnjs.cloudflare.com/ajax/libs/prism/1.11.0/themes/prism.min.css" rel="stylesheet" />  

And these lines in the footer section:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.11.0/prism.min.js"></script>  
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.11.0/components/prism-php.min.js"></script>  
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.11.0/components/prism-css.min.js"></script>  
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.11.0/components/prism-markup.min.js"></script>  
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.11.0/components/prism-javascript.min.js"></script>  
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.11.0/components/prism-yaml.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.11.0/components/prism-bash.min.js"></script>  

If you want to add some other languages, you can find the listing here : Prism.js libraries

When you write a story and in order to trigger the language highlighting, you have to add the language name in your code section juste after the triple back-ticks ```:
Some examples (```language_name):

  1. HTML markup
    ```markup
    <b>TEST</b>
    <footer class="post-full-footer">
    <section class="author-card">
    <section class="author-card-content">
    ```
    Result:
<b>TEST</b>
<footer class="post-full-footer">
<section class="author-card">
<section class="author-card-content">
  1. Javascript
    ```javascript
    <script type="text/javascript">
    var test = "test_highlighting";
    </script>
    ```
    Result:
<script type="text/javascript">
    var test = "test_highlighting";
</script>
  1. Bash
    ```bash
    docker ps
    docker exec -it container_id_or_name bash
    ```
    Result:
docker ps
docker exec -it container_id_or_name bash