
Supports: Gutenberg, Elementor, TinyMCE and shortcode
Display your code snippets in a stylish way inside your content. The plugin uses shortcodes and also very intuitive TinyMCE interface.
Starting with v2.0.3, the plugin offers support to be used via a custom Elementor Widget.
Starting with v2.0.1, the plugin offers support to be used via a custom Gutenberg block.
It will continue to support the default way of adding the code snippet via shotcodes.
Code Snippet DM was inspired by the Carbon project.
We created a simple way to display your code snippets but also have control over the way it appears, thus making it more stylish.
Also, on the front end in the top right you will find a Copy Code button that allows you to copy to clipboard the entired code snippet.
The plugin provides you with a TinyMCE button that will allow you to display the code or an option to use a shortcode.
You can open the shorcode [dm_code_snippet] and in the content inside and close it [/dm_code_snippet].
The Widget is called “Code Snippet DM” and can be found on the Basic list of Elementor Widget after you activate the plugin. Keywords that can be used to find it: code, snippet, dm.
Once the widget is added in the Elementor editor, it can be customized via the sidebar settings that will appear for each widget. The sidebar will include all the settings that are available for the shortcode. Some of the settings will be applied in real time in your editor.
The code styling (syntax highlight) and line numbers are only available on the front-end, in the editor you will not be able to preview the correct colors for the code or the line numbers.
The block is called “Code Snippet DM” and can be found in the embed section of Gutenberg blocks. Keywords that can be used to find it: code, snippet, dm.
Once the block is added in the Gutenberg editor, it can be customized via the sidebar settings that will appear for each block. The sidebar will include all the settings that are available for the shortcode. Some of the settings will be applied in real time in your editor.
The code styling (syntax highlight) and line numbers are only available on the front-end, in the editor you will not be able to preview the correct colors for the code or the line numbers.
There are a number of options that you can use in the shortcode:
Example of shortcode:
[dm_code_snippet background="yes" background-mobile="yes" slim="no" line-numbers="no" bg-color="#abb8c3" theme="light" language="css" wrapped="no" height="500px" copy-text="Get the Code!" copy-confirmed="You have it!"]<pre> .dm-code-snippet.dark { background: $default-bg; padding: 40px 35px 45px 35px; margin: 30px 0; }</pre> [/dm_code_snippet] Important:
* If you use the shortcode directly, make sure to wrap the code in <pre></pre> as in the example above.
* If you want to add HTML using the shortcode, you’ll need to escape the HTML before pasting it in the shortcode. (You can easily find an escape tool online to convert the code)
* If you have code (not HTML) that uses ‘</’ and you add it with the shortcode and not the and the TinyMCE button, you will need to escape ‘</’ from your code in order to properly display it.
Use the TinyMCE button if you don’t want to add the shortcode yourself. (see Screenshots)
Starting from $0 per month.
Rating
Reviewers
4 reviews
Tags
Developed By
George-Paul Crețu
Quick & Easy
Common Ninja has a large selection of powerful Wordpress plugins that are easy to use, fully customizable, mobile-friendly and rich with features — so be sure to check them out!
Testimonial plugins for Wordpress
Galleries plugins for Wordpress
SEO plugins for Wordpress
Contact Form plugins for Wordpress
Forms plugins for Wordpress
Social Feeds plugins for Wordpress
Social Sharing plugins for Wordpress
Events Calendar plugins for Wordpress
Sliders plugins for Wordpress
Analytics plugins for Wordpress
Reviews plugins for Wordpress
Comments plugins for Wordpress
Portfolio plugins for Wordpress
Maps plugins for Wordpress
Security plugins for Wordpress
Translation plugins for Wordpress
Ads plugins for Wordpress
Video Player plugins for Wordpress
Music Player plugins for Wordpress
Backup plugins for Wordpress
Privacy plugins for Wordpress
Optimize plugins for Wordpress
Chat plugins for Wordpress
Countdown plugins for Wordpress
Email Marketing plugins for Wordpress
Tabs plugins for Wordpress
Membership plugins for Wordpress
popup plugins for Wordpress
SiteMap plugins for Wordpress
Payment plugins for Wordpress
Coming Soon plugins for Wordpress
Ecommerce plugins for Wordpress
Customer Support plugins for Wordpress
Inventory plugins for Wordpress
Video Player plugins for Wordpress
Testimonials plugins for Wordpress
Tabs plugins for Wordpress
Social Sharing plugins for Wordpress
Social Feeds plugins for Wordpress
Slider plugins for Wordpress
Reviews plugins for Wordpress
Portfolio plugins for Wordpress
Membership plugins for Wordpress
Forms plugins for Wordpress
Events Calendar plugins for Wordpress
Contact plugins for Wordpress
Comments plugins for Wordpress
Analytics plugins for Wordpress
Common Ninja Apps
Browse our extensive collection of compatible plugins, and easily embed them on any website, blog, online store, e-commerce platform, or site builder.
Use an order form to let customers submit product orders, save entries, receive notifications, and collect payments through PayPal or Stripe for a smoother buying experience.
Show a GDPR-ready cookie notice that clearly explains how cookies are used, helping you stay compliant while creating a more transparent experience for your visitors.
Use a live weather forecast widget to show current conditions and upcoming predictions, giving visitors real time local weather updates for better planning.
Add Telegram Chat to your site to communicate with visitors, deliver instant support, and provide a smoother, more reliable user experience.
Add a donation button that lets users contribute easily using PayPal or Stripe, supporting causes directly from your site.
Show YouTube videos with a YouTube slider that displays clips in a smooth, customizable layout to boost engagement.
Show LinkedIn posts in a live feed that keeps updates current, builds credibility, and helps visitors engage with your brand.
Use social media links with sticky buttons that keep your profiles visible, boost engagement, and help promote your content more effectively across your site.
Create immersive 360 virtual tours with interactive hotspots that let visitors explore spaces, view details clearly, and experience panoramic environments seamlessly.

Show Pinterest content in a Pinterest feed that keeps your page visually engaging, highlights new ideas, and helps visitors explore fresh inspiration.
Gather supporter signatures with a petition form that collects entries, saves submissions, sends notifications, and helps you drive meaningful change efficiently.
Add customizable popups to your site to capture attention, deliver messages, and drive actions like signups or conversions.
More plugins
The Common Ninja Search Engine platform helps website builders find the best site widgets, apps, plugins, tools, add-ons, and extensions! Compatible with all major website building platforms - big or small - and updated regularly, our Search Engine tool provides you with the business tools your site needs!
