Skip to content

francescolaffi/ghost-prism-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Prism Syntax Highlighting for Ghost

Demo: http://ghost.flweb.it/ghost-syntax-highlighting-with-prismjs/ (offline)

Ghost is work-in-progress, especially the plugin API, so this is just an experiment, installation/updates are not super smooth, but I'm sure it will improve with time.

Installation

Tested with: Ghost 0.3.2

The installation requires patching a couple of lines in core, when updating Ghost it will break, but it would break anyway for the API changes, so check for new version/instructions when updating Ghost.

  • Download the plugin in contents/plugins/prism, e.g with git from ghost root git clone https://github.com/francescolaffi/ghost-prism-plugin.git content/plugins/prism
  • Patch some core files, from ghost root run patch -p1 < content/plugins/prism/patch/0.3.2.diff
  • edit your config.js adding activePlugins and prism plugin settings for your environment, example:
config = {
    // ### Development **(default)**
    development: {
        activePlugins: ['prism'],
        prism: {
            theme: 'default',
            plugins: ['line-numbers'],
            langs: ['markup', 'javascript', 'css', 'css-extras', 'php', 'php-extras', 'ruby', 'bash']
        }
  • Restart Ghost

It will compile the selected prism theme, plugins and langs together in a js and a css file when starting ghost, so config changes need ghost restart.

Usage

Prism syntax highlighting integrate nicely with the html ghost generates from markdown. You can use the triple backticks in markdown to generate<pre><code> html, adding the prism specific classes after the opening backticks.

examples:

```lang-javascript
alert('hello world');
```

```lang-ruby line-numbers
puts 'Hello world'
```

Or manually enter the html with the prism syntax. You can find info on prism and available themes, plugins and languages at http://prismjs.com/.

Drawbacks

  • only highligh syntax on frontend, not admin
  • using the line-numbers prism plugin the line numbers alignment is a bit off

About

Ghost plugin for syntax highlighting with PrismJS

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published