Get prism.js working

greatcat · July 19, 2015, 3:09pm

I can’t get work prism-js plugin for highlight code.

I added it to bower.json but it doesn’t work. The js and the css are correctly minified inside the mains files but simply it doesn’t work. You just can try it

Let me know

kalenjohnson · July 19, 2015, 4:10pm

Strange, I have it working here

greatcat · July 19, 2015, 8:16pm

Notice that if I add the JS manually in the footer, it works… Could help?

austin · July 21, 2015, 2:10pm

You have to tell bower where to find the source files because the author didn’t set up the package properly:

github.com

kalenjohnson/source-theme/blob/master/bower.json

{
  "name": "source",
  "homepage": "http://source.kalenjohnson.com",
  "authors": [
    "Kalen Johnson <info@kalenjohnson.com>"
  ],
  "license": "GPLv2",
  "private": true,
  "dependencies": {
    "modernizr": "2.8.2",
    "bourbon": "~4.2.2",
    "neat": "~1.7.2",
    "normalize.css": "~3.0.3",
    "fontawesome": "~4.3.0",
    "prism": "*"
  },
  "overrides": {
    "modernizr": {
      "main": "./modernizr.js"
    },

This file has been truncated. show original

greatcat · July 21, 2015, 3:38pm

Hi austin, I think I already did. This is my bower.json:

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "modernizr": "2.8.2",
    "bootstrap-sass-official": "3.3.5",
    "font-awesome": "~4.3.0",
    "animate.less": "*",
    "prism": "*",
    "Blur.js": "*"
  },
  "overrides": {
    "modernizr": {
      "main": "./modernizr.js"
    },
    "bootstrap-sass-official": {
      "main": [
        "./assets/stylesheets/_bootstrap.scss",
        "./assets/javascripts/bootstrap/transition.js",
        "./assets/javascripts/bootstrap/alert.js",
        "./assets/javascripts/bootstrap/button.js",
        "./assets/javascripts/bootstrap/carousel.js",
        "./assets/javascripts/bootstrap/collapse.js",
        "./assets/javascripts/bootstrap/dropdown.js",
        "./assets/javascripts/bootstrap/modal.js",
        "./assets/javascripts/bootstrap/tooltip.js",
        "./assets/javascripts/bootstrap/popover.js",
        "./assets/javascripts/bootstrap/scrollspy.js",
        "./assets/javascripts/bootstrap/tab.js",
        "./assets/javascripts/bootstrap/affix.js",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
      ]
    },
    "font-awesome": {
      "main": [
        "./scss/font-awesome.scss",
        "./fonts/*"
      ]
    },
    "prism": {
      "main": [
        "./prism.js",
        "./themes/prism-okaidia.css"
      ]
    },
    "Blur.js": {
      "main": [
        "./blur.js"
      ]
    }

  }
}

greatcat · July 21, 2015, 7:55pm

Guys, I made a clean installation of WP+Sage+bower.json above, and Prism doesn’t work! But if I add manually in footer.php it works…

greatcat · July 22, 2015, 8:35am

Solved, the problem was prism related. I didn’t load in bower.js the js component for each languages.

austin · August 4, 2015, 8:52pm

@greatcat could you throw the solution over at https://github.com/austinpray/asset-builder/wiki/User-Contributed-Examples#prismjs ?

dstrunk · October 11, 2015, 7:04pm

Hey @austin, I added a solution for Prism at the above link; feel free to edit as necessary, but that worked for me with getting everything wired up as separate deps.