|
| Display beautiful syntax-highlighted code snippets with Prism.js or Highlight.js Wordpress Tutorial |
Noted That:
|
Start the Tips:1. First Download " prismatic.zip " Plugin to your Local Computer. (Click Download) 2. Then, Login to your " yourdomain.com/wp-admin " Dashboard.
3. Then, Click on " Plugins " + " Add New " from left sidemenu of Dashboard.
4. Now, Click on "Upload Plugin" button.
5. Now, Browse " prismatic.zip " Downloaded plugin from your computer, Where you downloaded prismatic.zip According to Step – 1 Above then, click on " Install Now"
6. Now, Click on " Active Plugin"
7. Then, See left sidemenu. " Prismatic " folder is added on left sidemenu. Now, Click on " Prismatic " folder. Noted that: If you do not see " Prismatic " folder on left sidemenu then, see at left sidemenu " Settings " or " Tools ". 8. Now you configure yourself oR Watch video tutorial below about Prismatic Configurtions and Settings or How to work " Prismatic " in your WordPress site. oR After Activated Plugin According to Step-6 then,
|
| Guide | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Installing Prismatic
More info on installing WP plugins Quick Start Guide Here is a quick guide to get started with Prismatic:
You are now ready to go. To add a code snippet to any WP Post or Page:
To get a better idea, view the screenshots on the Prismatic homepage . The Prismatic block or button makes it easy to add your code snippet and choose a language. The plugin automatically will output the correct markup to display your code with syntax highlighting. No code editing required! Note: Advanced usage information provided further down on this page. Like the plugin? If you like Prismatic, please take a moment to give a 5-star rating . It helps to keep development and support going strong. Thank you! Uninstalling Prismatic cleans up after itself. All plugin settings will be removed from your database when the plugin is uninstalled via the Plugins screen. NOTE that uninstalling the plugin will NOT touch any of your post content. Only the plugin options are removed when the plugin is uninstalled via the Plugins screen. Restore Default Options To restore default plugin options, either uninstall/reinstall the plugin or visit the Prismatic General Settings > Restore default plugin options. Usage: Syntax Highlighting The Prismatic plugin follows the same conventions used by Prism.js and Highlight.js . Here are the basic steps:
Once the settings are configured, you can enable syntax highlighting for any code snippet by doing one of the following:
The plugin also provides a Prismatic Gutenberg block and TinyMCE buttons. So you can add code snippets with a few clicks easily. Note: Prism.js highlights both multi-line and single-line code snippets. Highlight.js only supports multi-line code snippets.
With the proper markup in place, you can indicate a specific language by adding a class of
Likewise, to indicate HTML as the language for a multi-line code snippet:
Alternately, the language class may be placed on the tag, for example:
Note that each library — Prism.js, Highlight.js, and Plain Flavor — features its own code-escape settings. So the code-escape settings that are applied depends on the currently active library. Visit the plugin’s General Settings to choose your library. Then visit that library’s tab to configure its code-escape settings.
When code escaping is enabled for either/both the frontend or Admin Area, the plugin makes the following changes to any code contained within
These are the only changes made to your code, no other changes are made. As mentioned, the difference between code escaping on the frontend vs. the Admin Area is that, on the frontend, the above changes are made at runtime and not saved to the database; whereas in the Admin Area, the changes are made when the code is viewed via a content editor, such that any changes made will be saved to the database when the user clicks the “Update” or “Publish” button. Please keep this in mind when choosing your code-escape settings. Important! As explained, enabling code escaping in the Admin Area may result in the escaped code getting saved in the database. This is fine in most cases, but there may be situations where escaping should only happen at runtime. If that is the case, or if you are unsure, choose the “Frontend only” option for the “Code Escaping” setting. The “Frontend only” option only modifies code when displayed on the frontend and does not save any changes to the database. Usage: Gutenberg Block Editor To highlight a code block using Gutenberg:
Usage: Classic TinyMCE Editor To highlight code using the TinyMCE/Visual/Rich-Text Editor:
There also is a Prismatic Quicktag button (“pre”) for those using the Plain-Text editor. Usage: Prism.js Plugins Currently the Prismatic plugin provides four plugins for Prism.js.
Any/all of these plugins can be enabled in the Prism.js settings. To learn more about usage and options, visit the plugin links in the above list. About Prism.js Prism.js version used in Prismatic plugin: 1.21.0 Prism.js resources License & Info
Supported Languages
So for example, to specify a code block as C++, you would write:
Note: in the previous example, ignore the
To disable Prism.js syntax highlighting for any snippet, simply omit the language class. Or, to disable syntax highlighting for a code snippet while also loading the Prism.js stylesheet, add a class of
I’m glad to add more languages, make a suggestion About Highlight.js Highlight.js version used in Prismatic plugin: 10.1.2 Highlight.js resources License & Info
Supported Languages
So for example, to specify a code block as C++, you would write:
Note: in the previous example, ignore the
To disable Highlight.js syntax highlighting for any code block, add a class of
Similarly, you can add a class of
I’m glad to add more languages, make a suggestion |
| display , beautiful , syntax , highlighted , code , snippets , prismjs , highlightjs , tutorial , |
| Name |
|---|
Read Article https://develop.horje.com/learn/1434/reference