Search Over 30,000 FREE Plugins from the Official WordPress Plugin Directory Repository

Codeblocks Extended with PrismJS

Codebocks Extended with PrismJS includes syntax highlighting, copy to clipboard, and Visual + Text editor integration.

Codeblocks Extended with PrismJS was born of a personal need for a lightweight code highlighter, with special functionality. Many of the other PrismJS based plugins in the repository were either outdated, or were lacking features that I was looking for.

Features:

  • Integrates the latest PrismJS build, with the most common langauges used.
  • Integrates the PrismJS line-numbers plugin, to automatically number lines of code.
  • Integrates the PrismJS line-highlight plugin to allow you to highlight specific lines of code.
  • Integrates ClipboardJS + custom jQuery to add a "Copy to Clipboard" button to each code block.
  • Custom Text Editor button to wrap selected text with the most commmon <pre> and <code> classes, and replacing special characters with their HTML safe equivalents.
  • Custom Visual Editor / TinyMCE dropdown button, with the most common languages to wrap selected text.
  • Since this works via wrapping <pre> and <code> tags with classes, you can use all custom class settings that PrismJS offers.
  • No shortcodes to mess with, so you don't have to worry about losing whitespace between editor modes.
  • No settings page needed: Just activate it and go!

For a full list of languages supported and more information on this plugin's use, please check out the FAQ.

Note: This does NOT auto-detect the language. Most plugins that do so brute force the languages or require file extensions, resulting in a much heavier plugin. The decision was made to keep this as light-weight as possible.

To see how this plugin was made, check out the guide at WP Tech Guides .

Thanks to Mike @ WP Bullet for the banner and icon.

Author duplaja (Dan D.)
Profile
Contributors duplaja
Tags clipboardjs, code, Code Highlighting, pre, prismjs
  1. codeblocks-extended screenshot 1

    Sample code block created with Codeblocks Extended. Notice the copy button in the top right corner.

  2. codeblocks-extended screenshot 2

    Code block with line highlighting.

  3. codeblocks-extended screenshot 3

    Visual Editor TinyMCE options.

  4. codeblocks-extended screenshot 4

    Text Editor Button

  1. Upload the plugin files to the /wp-content/plugins/prism-js directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the 'Plugins' screen in WordPress
  3. That's it!

1.01

  • Updated readme.txt

1.0

  • Initial Plugin Release

How do I highlight lines of code?

You can specifiy lines to highlight using the data-line attribute of the <pre> tag, in the Text Editor.

  • Single Line: data-line="7"
  • Range: data-line="3-9"
  • Combination: data-line="2,4-6,9-12"

What other cool things can I do?

  • You can link to individual lines of code, using href="#{pre-element-id}.{lines}". Ex: href="#preblockone.5-6".
  • If you are comfortable, you can rebuild prism.min.js to include other languages than the ones below, or modify your CSS.
  • Learn how this plugin was built, from start to end (and build your own version) Build Your Own

How do I specify a language if it's not one of the defaults on the dropdown?

You can specifiy languages using the language-xxxx class of the <pre> and <code> tags via the Text Editor.

For the sake of plugin size and speed, only the most common languages were included in this plugin. See below for the complete list.

For a list of class names, you can look here on the official PrismJS site: PrismJS Language List

Which languages are included by default?

  • Markup
  • CSS
  • C Languages
  • JavaScript
  • Apache Configuration
  • Bash
  • Batch
  • Ruby
  • Docker
  • Git
  • HTML
  • HTTP
  • Makefile
  • Markdown
  • Nginx Config
  • PHP
  • Python
  • SASS and SCSS
  • SQL
Share  
Download
Version 1.01

Requires WordPress version: 3.0.1 or higher

Compatible up to: 4.6.3

Last Updated 23 Oct 2016

Date Added: 23 Oct 2016

Plugin Homepage

Evaluation
star1
star2
star3
star4
star5

0 stars
0 ratings
84 downloads

Compatibility

Not Enough Data

Reports:
Works: 0
Broken: 0