Code Snippet DM

Code Snippet DM

Wordpress plugin

Install on Wordpress

App Details

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].

Elementor widget

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.

Gutenberg block

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.

Shortcode Options

There are a number of options that you can use in the shortcode:

  • background with options yes or no will enable/disable the color background (Default yes)
  • background-mobile with options yes or no will enable/disable the color background for mobile devices (Default yes)
  • bg-color accepts any HEX, RGB or RGBA value to change the background color (Default #abb8c3)
  • theme with options light or dark that changes the code editor theme (Default dark)
  • slim with options yes or no that changes the code editor from default to a slim version, ideal for one-line code (Default no)
  • line-numbers with options yes or no that will enable a left side line number for columns (Default no)
  • language with options clike, css, javascript, markup, perl, php, python, ruby, sql, typescript, shell will highlight the syntaxes based on what you select for your code (Default php)
  • wrap with options yes or no will wrap the code or add a horizontal scroll bar to display it as it is (Default no)
  • height allows you to input any value and will set the code snippet height to that value. Example: 500px. (Default is empty)
  • copy-text this is used for the text shown on the copy button. If it’s not added it will use the default option. (Default Copy Code)
  • copy-confirmed this is used for the text shown after you click the copy button. If it’s not added it will use the default option. (Default Copied)

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)

Pricing

Starting from $0 per month.

Check Out the Instagram Carousel Widget

By Common Ninja

Instagram CarouselTry For Free!

App Info

Rating

Reviewers

4 reviews

Tags

code
code snippet
embed
snippet

Developed By

George-Paul Crețu

Quick & Easy

Find the Best Wordpress plugins for you

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

Testimonial plugins for Wordpress

Contact Form

Contact Form plugins for Wordpress

Maps

Maps plugins for Wordpress

Translation

Translation plugins for Wordpress

Chat

Chat plugins for Wordpress

Slider

Slider plugins for Wordpress

Reviews

Reviews plugins for Wordpress

Contact

Contact plugins for Wordpress

Galleries

Galleries plugins for Wordpress

SEO

SEO plugins for Wordpress

Forms

Forms plugins for Wordpress

Comments

Comments plugins for Wordpress

Backup

Backup plugins for Wordpress

Privacy

Privacy plugins for Wordpress

Optimize

Optimize plugins for Wordpress

Tabs

Tabs plugins for Wordpress

Social Sharing

Social Sharing plugins for Wordpress

Events Calendar

Events Calendar plugins for Wordpress

Comments

Comments plugins for Wordpress

Social Feeds

Social Feeds plugins for Wordpress

Social Sharing

Social Sharing plugins for Wordpress

Portfolio

Portfolio plugins for Wordpress

Video Player

Video Player plugins for Wordpress

popup

popup plugins for Wordpress

SiteMap

SiteMap plugins for Wordpress

Payment

Payment plugins for Wordpress

Coming Soon

Coming Soon plugins for Wordpress

Inventory

Inventory plugins for Wordpress

Testimonials

Testimonials plugins for Wordpress

Portfolio

Portfolio plugins for Wordpress

Membership

Membership plugins for Wordpress

Forms

Forms plugins for Wordpress

Analytics

Analytics plugins for Wordpress

Events Calendar

Events Calendar plugins for Wordpress

Sliders

Sliders plugins for Wordpress

Analytics

Analytics plugins for Wordpress

Reviews

Reviews plugins for Wordpress

Security

Security plugins for Wordpress

Ads

Ads plugins for Wordpress

Music Player

Music Player plugins for Wordpress

Countdown

Countdown plugins for Wordpress

Email Marketing

Email Marketing plugins for Wordpress

Membership

Membership plugins for Wordpress

Ecommerce

Ecommerce plugins for Wordpress

Customer Support

Customer Support plugins for Wordpress

Video Player

Video Player plugins for Wordpress

Tabs

Tabs plugins for Wordpress

Social Feeds

Social Feeds plugins for Wordpress

Common Ninja Apps

Some of the best Common Ninja plugins for Wordpress

Browse our extensive collection of compatible plugins, and easily embed them on any website, blog, online store, e-commerce platform, or site builder.

Instagram Carousel for Wordpress logo

Instagram Carousel

Show Instagram posts in a responsive carousel layout to enhance social proof and keep your site content visually fresh.

Creative Card Carousel for Wordpress logo

Creative Card Carousel

Showcase content with a creative card carousel that rotates banner style items to highlight offers and important messages.

Google Reviews for Wordpress logo

Google Reviews

Show verified customer feedback with Google Reviews to build trust, strengthen credibility, and help visitors make confident purchase decisions.

MP3 Player for Wordpress logo

MP3 Player

Add an MP3 Player to your website and engage visitors with music, podcasts, and spoken audio without any setup complexity.

Reviews Trust Box for Wordpress logo

Reviews Trust Box

Display ratings from multiple platforms in a reviews trust box that builds credibility, social proof, and boosts conversions.

LinkedIn Feed Carousel for Wordpress logo

LinkedIn Feed Carousel

Show LinkedIn posts with a LinkedIn feed carousel that auto updates, presents content in a smooth layout, and keeps visitors engaged.

Website Search for Wordpress logo

Website Search

Add a Google powered search bar that delivers relevant results, improves navigation, and helps visitors find content fast.

Etsy Reviews for Wordpress logo

Etsy Reviews

Show Etsy reviews to build trust, strengthen credibility, and help visitors make confident purchase decisions that support higher sales.

Corner Coupon Pop-up for Wordpress logo

Corner Coupon Pop-up

Add a corner coupon pop-up to highlight discounts, collect emails, and drive user engagement without interrupting browsing.

Team Member List for Wordpress logo

Team Member List

Present your team with a structured team member list that builds trust, supports credibility, and helps visitors connect with the people behind your brand.

TDEE Calculator for Wordpress logo

TDEE Calculator

Create custom calculators that let visitors enter values, get results, and make confident choices that support your business.

Image Grid Slider for Wordpress logo

Image Grid Slider

Showcase visuals with an image grid slider that blends a grid layout and carousel motion to create a dynamic, customizable, mobile friendly display.

More plugins

plugins You Might Like

Discover Apps By Platform

Discover the best apps for your website

WordPress
Wix
Shopify
Weebly
Webflow
Joomla
PrestaShop
Shift4Shop
WebsiteX5
MODX
Opencart
NopCommerce

Common Ninja Search Engine

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!

Multiple platforms