Descrição
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.
Note 2: This is designed to work with the Classic Editor. It does not currently work in Gutenberg blocks.
Thanks to Mike @ WP Bullet for the banner and icon.
Ecrãs
Instalação
- Upload the plugin files to the
/wp-content/plugins/prism-js
directory, or install the plugin through the WordPress plugins screen directly. - Activate the plugin through the ‘Plugins’ screen in WordPress
- That’s it!
Perguntas frequentes
- 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
Avaliações
Este plugin não tem avaliações.
Contribuidores e programadores
“Codeblocks Extended with PrismJS” é software de código aberto. As seguintes pessoas contribuíram para este plugin:
ContribuidoresTraduza o “Codeblocks Extended with PrismJS” para o seu idioma.
Interessado no desenvolvimento?
Consulte o código, consulte o repositório SVN, ou subscreva o registo de alterações por RSS.
Registo de alterações
1.1
- Tested with current version of WP, updated readme.txt
1.01
- Updated readme.txt
1.0
- Initial Plugin Release