Coder(called “Code” in the Selection pack) is a simple and flexible syntax highlighting WordPress plugin for Elementor based on a lightweight and robust prism.js library. Even the basic Coder widget settings provide a pretty and readable code-appearance. It supports more than 200 Programming, Scripting, and Mathematical Markup Languages for syntax highlighting with 30+ different style themes.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content Tab
On the Content tab of the syntax highlighting widget, you can enter the code or a source of code, as well as manage all available features.
Source Code settings
The section for choosing the language that will be used for the code box with syntax highlighting, inserting the code or its source.
Source
Two types of source code available:
- Editor – a text area field for entering/pasting the code. This option is better to use when you need to add not a large part of code or prepared snippet because any editing in the area text is not very convenient.
- URL – a field for entering a link to the file with code. You can add an internal URL to code snippets, URL to files from BitBucket, GitHub, localhost, or other sites. The only condition for using the URL is that CORS must be enabled on the site from which you want to take the code since files are fetched with XMLHttpRequest. Besides, if you want to use the repository, it must be public so the code appears in the Elementor block.
Language
Select the language that you use for the code to highlight the syntax correctly. The plugin supports more than 200 languages, find all the list here https://prismjs.com/#supported-languages. Besides, you can see how the highlighting of a particular language looks in the examples.
Features settings
Section for managing various features. You can read more about the functions and see examples on https://prismjs.com/#plugins
Line Numbers
The toggle to enable/disable line numbering display.
Line Highlight
The toggle to enable/disable certain lines highlighting. You can highlight a specific line, range of lines or list of lines separated by commas.
Show Invisibles
The toggle to enable/disable hidden characters display such as tabs and line breaks.
Autolinker
The option converts URLs and emails in code to clickable links. Parses Markdown links in comments.
Show Language
The toggle to enable/disable language display used for the code box with syntax highlighting. The option adds a badge with the name of the language in the corner of the box.
Inline Color
The toggle to enable/disable color previews display in style sheets. This improves code readability and understanding.
Previewers
The toggle to enable/disable previews to display angles, colors, gradients, easing, and time.
WebPlatform Docs
Makes tokens link to WebPlatform.org documentation. The links open in a new tab. This plugin is still in beta. For example, clicking on a property in the CSS, you refer to the documentation where we can read more about this property. This can be especially useful for sites with training materials, lessons, or courses.
Command Line
The toggle to enable/disable a command line display with a prompt and, optionally, the output/response from the commands. It may be useful for sites with information about Linux, Mac OS, or various system settings. Read more about the plugin here
Copy to Clipboard Button
The toggle to enable/disable a button that copies the code block to the clipboard when clicked.
Download Button
The toggle to enable/disable a button for a code file download. The option available if URL is selected as source code.
Match braces
The option will highlight brace pairs when the cursor hovers over one of the braces. The highlighting effect will disappear as soon as the cursor leaves the brace pair. Besides, you can enable rainbow braces to highlight pairs of brackets with different colors.
Diff Highlight
The option highlights the code inside diff blocks.
Style tab
On the Coder widget styles tab, you can configure everything related to the visual style of elements: style theme, colors, typography, backgrounds, gradients, and more.
Code Block
- Theme – apply one of over 30 available style themes for the code block.
- Dark/Light Mode – detect if the user has requested the system use a light or dark color theme. If the option is enabled, you can also select the “Dark Mode Theme” from the list.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
- Background Type – this setting changes the background of the current section. You can choose a color, gradient, or background image.
- Max Height – specify the height of the code block in different units(px, em, vh) for desktop, tablets, or phones.
- Margin – the setting allows managing the margin of the code box in different units(px, em, %) for desktop, tablets, or phones.
- Padding – the setting allows managing the padding of the code box in different units(px, em, %) for desktop, tablets, or phones.
- Border type – select one of the available border types (solid, double, dotted, dashed, groove) for the current block and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Box Shadow – this setting creates a shadow from the box and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
Language mark
- Always visible – the option allows you to make visible a badge with the name of the language always or when hovering a code block.
- Margin – manage the margin of the language mark in different units(px, em, %) for desktop, tablets or phones.
- Padding – manage the padding of the language mark in different units(px, em, %) for desktop, tablets or phones.
- Ink Color– specify the font color and opacity for the mark text using the color picker.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
- Background Type – this setting changes the background of the current section. You can choose a color, gradient, or background image.
- Border type – select one of the available border types (solid, double, dotted, dashed, groove) for the current block and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Box Shadow – this setting creates a shadow from the box and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
Copy button
- Always visible – the option allows you to make visible the copy button always or when hovering a code block.
- Margin – manage the margin of the copy button in different units(px, em, %) for desktop, tablets or phones.
- Padding – manage the padding of the copy button in different units(px, em, %) for desktop, tablets or phones.
- Icon Height – specify the height of the copy button.
- Ink Color– specify the font color and opacity for the copy button using the color picker.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
- Background Type – this setting changes the background of the current section. You can choose a color, gradient, or background image.
- Border type – select one of the available border types (solid, double, dotted, dashed, groove) for the current block and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Box Shadow – this setting creates a shadow from the box and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
Advanced Tab
The settings in the widget advanced tab of the plugin allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
Hosting for Elementor websites
Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.