Author: Peter Knight

More shape-outside (troubleshooting) tips

There are some excellent resources on the CSS property shape-outside that should be studied to understand how it works and how you can use it. This new property now enjoys a lot of browser support and it’s something you can generally apply without worrying about how it looks in non-supported environments, so it’s good to use in production now.

When I started playing around with it I did stumble over a couple of things. I figured I would write down some additional tidbits and tips that aren’t covered explicitly elsewhere. First, do read up on shape-outside on MDN, from the wonderful Sara Soueidan at ListApart and Robin Rendle’s working with shapes article on Michelle Barker also has a nice article on experimental layouts using shape-outside, including advice on using inverted shape techniques.


Floated elements only

Shape-outside can only be applied on floated elements right now, so knowing how floats work is very important to be able to understand how to implement an effect using shape-outside. There are some limitations and quirks that you might bump against. And the way the shape area is implemented might surprise you.

How to get a shape to fill the height of its parent

not with position absolute

One of the first things I’ve tried to implement was a shape that expands along with the content and this proved to be pretty difficult. Shapes can be defined using relative units, but a floated element can’t be given dimensions which respond to the content around it. If you want your shape to be the length of the content it’s supposed to affect, tough luck getting it to expand and shrink in an elegant way. One way to get a floated element to stretch in either direction to match the height of the container’s contents is to use position absolute and set top/bottom/left or right, but position absolute will also destroy the intended behaviour, as the contents won’t flow around it.

probably not with height: 100% either

Setting a proportional height such as height 100% will only work if the height of the container has been set. In most cases this won’t be workable, if you’re working with an unpredictable length of content it’s unlikely you want to set an absolute height on its container element and using a relative height is not enough.

using javascript

I’ve found no way to make a floated element fit its container with css only, so the alternative is some javascript. Here’s an example I wrote that adds height attributes to elements inline. It recalculates automatically when the viewport is resized.

How the shape area relates to the bounding box of the floated element

The shape’s locus of influence sits within the dimensions of the bounding box of the floated element. The shape you define can never expand beyond the dimensions you specify on the floated element. So your shape may have dimensions that are larger than the floated element, that shape will simply clip at the edges of your floated element.

Floats, shape-outside and clipping

A floated element may escape beyond its container (demo). There are different ways to deal with that behaviour. You can force the container to expand to fit the floated element. You do that by setting overflow: hidden on the container. You can also let the float clip, while hiding it by stacking it behind subsequent elements using z-index.

The shape-area does not observe your stacking instructions!

The clipped portion of your shape, i.e. the part that exceeds the container it’s floated in can’t be stacked below other elements. And this can be a bit of a surprise. As text in subsequent elements even outside the container of your floated element may wrap around your shape-area. Here is a demo to demonstrate. For further reading it’s worth reading up on

floated element using shape-outside interacting with adjacent elements
This green floated element is higher than its container and it breaches adjacent containers. The ellipse shape it defines continues to affect the contents of elements down the page. (The handles you see are from the Firefox dev tools control).
shape-outside interacting with elements with a higher z-index
The orange div here has a z-index of 2, which obscures the green floated element’s contents and background color, but you see that its own contents is still wrapping around the ellipse shape.

You can use pseudo :before and pseudo :after to created floated elements

The cool thing is that floated elements can be pseudo elements, which in turn can have shape-outside defined on them. That means you won’t have to add a physical element in your markup to insert your shape effect.

You can use a transparent png to define the shape-area

Just note that when you specify the url in your shape-outside property, it’s not actually going to display your image, it’s going to compute the area of the image and redirect words and elements around the resulting shape. To have the image display you have to do so separately.

(Check here if you have issues getting transparent pngs to work as a shape)

Firefox has a very nifty shape editor in its developer tools console

To access it, look at the rules panel while you’ve selected the floated element. For the shape-outside property you’ll see an icon which you can click on. It will highlight the shape in the browser while letting you manipulate the points.


Rochen WordPress migration tips

If you’re moving your WordPress sites to Rochen hosting, here are some potentially useful tips if you’re doing things manually.

First I recommend using All-in-One WordPress Migration plugin to export your existing sites into an export file. This plugin is very smooth with large packages, but does come with a maximum size limit before you have to upgrade to premium. They don’t tell you this until you try to import a package that over 512mb, so it can take you by surprise. Annoyingly, the plugin doesn’t give you a way to filter out unwanted file types (like large zips that may be floating about), so you don’t have a meaningful way of reducing the file size without manually removing stuff. They also use a self-created file format that you can’t open with normal software like 7zip, so you’ll have no luck removing large files manually from there either. However as a workaround, you can adjust the file size limit by modifying the constant ‘AI1WM_MAX_FILE_SIZE’ in constants.php. Set it to 4 >> 28 to get a 1gb file limit.

You could also use the Duplicator plugin. This is another excellent free solution, but the actual import process is not drag and drop. With All-in-One WP Migration all you have to do is install the plugin on the new site and drag and drop the exported file to import. With Duplicator you have to manually upload its files and run the installer outside of WordPress.

Rochen’s panel doesn’t make it immediately obvious how to add apps/sites to your package. If you go looking for a ‘create new site’ or ‘add app’ button somewhere you won’t find it. Provided you opted for a multi-site plan, you can add new sites at no extra charge by going to the manage hosting section. Adding a new site works by selecting the Create new account option from that screen. Once you do this a new site with accompanying cpanel will be provisioned.

You have the option of automatically installing WordPress on the create account step, but it’s useful to know that it’s fixed to use the domain without www. This can be a bit of a gotcha if your exported site is expecting a www based site, as you’ll get a redirect loop when you try to access the site after importing the WordPress database as is. This means you have to manually go into phpmyadmin to change two of the top entries in the options table that define the site/home/installation url just to get to your WordPress admin again (else you may get stuck in a redirect loop). If you are moving a site that defaults to using www, you might as well skip the automatic installation option because you want to preserve the www behaviour in most cases (if Google indexes your pages using the www subdomain, you want to keep it that way). Instead go through the scriptalicious WordPress installation screen from the cpanel after provisioning the site. From there you have options to set the site url. You can easily choose between http:// http://www and https:// and https://www from a drop down menu.

That brings us to SSL certificate installation. This is very easy at Rochen. Find the Let’s encrypt button on the Cpanel screen. From there you can initiate certificates by pressing the ‘issue’ button. It will take you to a screen where you can set what areas will be covered. If you are managing your DNS settings with Rochen this should be all quite automatic. If you are managing things through another service (like Namecheap’s managed DNS for instance), you may have to make adjustments and additions to your domain’s DNS settings. Always give it some time whenever you change a DNS setting before things take effect.

DNS settings are pretty easy, you just have to point your A records to the IP of your Rochen server, which you can find in your control panel. On some of my sites I was using URL redirect records (which Namecheap lets you do) to automatically redirects one domain to the next so I could send people to the www version of the site if they tried using the site without www. I found this messed with the SSL certificate issuing step mentioned above (it insists on installing a certificate for the non-www version), so I changed those entries into standard CNAME records instead.

Shape-outside and transparent PNGs troubleshooting tips

Shape-outside is a revelatory addition to CSS, allowing designers to creatively bend text around shapes and since Firefox version 62 it enjoys over 80% browser support. There are several excellent resources on applying shape-outside but not that many articles demo the ability to use transparent PNGs. I was having trouble getting it to work initially, but there’s a couple of reasons why the effect might not show. Here are some tips:

  • Did you check that your element has width/height set?
  • Did you apply float to the element?
  • Did you double check that the PNG you are using uses transparency?
  • Is your PNG much larger than than the element itself?

If the effect still isn’t showing, maybe there is an issue with how the PNG is being fetched. Try replacing the url with a data URI instead and see if that makes a difference. If it now works, there is an issue fetching the PNG from your image url. For that see the notes on CORS and  Shape-outside urls on MDSN.

WordPress and Vue Guides and Resources

Vue is a very attractive framework for building interfaces that has rapidly become an alternative to other popular tools like React & Angular. It’s lean, it’s fast and it’s actually fun to use while making code easier to read and reason with. It’s beginner friendly while also providing every foundation needed to build out the most complex of apps and websites. It’s great for individual coders but also allows works well in large teams of collaborators.

Why Vue Works Great in WordPress Projects

In a WordPress setting Vue.js is a suitable solution for small pieces of functionality as well as entire themes because it is a small payload. Vue uses html templates that are easy to understand. Unlike some other frameworks, you don’t need tooling to get started. You can include Vue on your page and start creating components without ever touching webpack, node.js or configuring a transpiler without any noticeable dip in performance. Those tools are only required if you want to take the development approach up a notch.

Vue compares favourably to other ways of building interfaces. If you’re just using plain javascript or leveraging jQuery, Vue will help you write less onerous code that is more efficient. More sophisticated tools such as React and Angular have arguably a higher barrier to entry by comparison. Working with css and creating transitions also is easier in Vue. Vue allows you to work with ‘single file components’ where you can easily organize and reason with the different parts that make up a component; javascript logic, html templating and css are kept separate, yet come together in the same file. If you already have mastered any one of these languages, working with Vue may feel much more comfortable to you than working with similar components written for other frameworks.

Another benefit of Vue is that any additional tools you might choose to compliment Vue with are pretty easy to chose. For additional state management help you can add on Vuex, for routing there is vue-router and vue-resource provides a bunch of goodies when making web requests. You don’t have to endlessly research and compare the merits of different competing 3rd party projects like is the case in the React ecosystem (a disadvantage of React’s more sprawling ecosystem).

Learning Vue and Complimentary Tools

The home of the Vue project is noted for its excellence and is the best place to learn the ins and outs of Vue, go visit it here:

Guide to Vue.js

Vuex is a complimentary library that is useful for non-trivial projects that use Vue that you might like. It also comes with excellent documentation from the project’s creator:

What is Vuex

Video tutorials:

Vue.js 2 – Getting Started is a free video series on Youtube by @Maxedapps. If you like the instructor, he also has a paid course on Udemy that is excellent value.

Vue.js 2.0 in 60 minutes by Traversy Media.

Learn Vue2: Step by Step is a free(?) video series on laracasts.


Learning Vue.js 2 by Olga Filipova

Vue.js 2 Cookbook by Andrea Passaglia

Vue.js 2 Basics: Learn the basics of vue.js and earn your blackbelt by Tony Lea

WordPress Guides & Tutorials

Tutorials by Paulund that cover Vue usage in WordPress.

Josh Pollock wrote one of the first Vue tutorials for WordPress over at TorqueMag, describing how to work with Vue & the REST API.

Here’s is another write up by Josh Pollock on using Vue inside of the admin while taking advantage of ES6

Here you can learn how to create a Vue plugin from Ramsay Lanier, in it he demonstrates a content parsing solution for WordPress use cases.

WordPress Projects Using Vue

Riad has set up a limited experiment for Gutenberg the WordPress editor project which uses Vue instead of React.

Bill Stavroulakis has worked on an offline-first SPA using Vue.js, the WordPress REST API and Progressive Web Apps.

Wyvern provides WordPress theme boiler plate for a Vue project.

RtCamp have created Vue Theme, a starter theme which uses Vue as the basis.

WordVue is starter theme that helps you set up a workflow for a Vue powered WordPress theme

Configuring RxDB for Nuxt+Electron using SQLITE3

RxDB is a tool for setting up a reactive database which in turn uses PouchDB, which in turn offers a variety of adapters that can build different types of databases with solutions like indexeddb and websql. It wasn’t altogether clear to me whether it would work nicely in an Electron app, and a nuxt.js driven one at that. Installation was a right nightmare.

To get setup you probably want to use sqlite / the websql adapter in pouchdb/RxDB. This involves configuring node-gyp and a bunch of dependencies. It won’t run properly out of the box until you tailor it to the version of electron you are running. To get sqlite3 running you will need a bunch of other dependencies installed as well, such as python 2.7. On Windows the most convenient way to do is to install windows-build-tools.

Here are some helpful tips if you have trouble installing windows build tools

If you get errors like “electron-v1.3-win32-x64\node_sqlite3.node module missing” you can try performing the manual steps outlined here and here. The important bit is that you need to tie your sqlite3 package to the specific version of electron that you have running in your project.

I also was getting webpack errors (unexpected character # at 1:0) relating to js files that open with a # hash/shebang directive. To fix that you can install the shebang loader and run it on the js files (like this) in question as a loader in your webpack configuration. In a nuxt project you configure your webpack config modifications in the nuxt.config.js file!

If you fail to get things running like I did for 3 days (until I got it working), there are alternatives like lowdb, nedb or realm but it really depends on what kind of setup you need in your project.


So it turns out the hardest part of setting up RxDB with sqlite3 is due to webpack not working well with native add-ons. There are a whole slew of build/parsing errors you will encounter by the dependencies that are introduced via node-gyp, node-pre-gyp and sqlite3. The errors are very similar to ones mentioned in this webpack related thread. Some examples:

SyntaxError: Unexpected character '#' (1:0)
the request of a dependency is an expression
Module not found: Error: Cannot resolve module 'node-gyp'
Module build failed: SyntaxError: Invalid number (108:10)


Because nuxt.js uses a SSR approach you’re kind of stuck with webpack for all your components. However, RxDB can work just fine with sqlite3 (via the pouchdb-node-websql-adapter) on the client. This offers one way of working around webpack: just load up RxDB as a script asset on the client and access it inside a Vue instance. You can configure a header script in your nuxt.config.js file. You may want to set webSecurity to false to be able to load the script as a local file.

Advanced Guides & Resources Dealing with the Customizer API in WordPress

The customizer is one of the newest and most fast developing areas in WordPress. It’s also one of the tougher APIs to code for because there are a lot of moving parts and to get the most out of it you really need to be proficient with the javascript based API as well as the PHP based API. Here is an evolving list of resources that go beyond the Codex pages to help developers out as they build out their own customizer functionality.

Code Examples For Working With the Customizer API by the Theme Review Team

Various examples of working with the Customize API, such as creating simple and advanced panels/sections/controls/settings. But it’s mostly PHP and doesn’t touch much on the client side of things.

Code Example For Creating a Postmeta Based Customizer Setting

This is a working example of a postmeta based customizer setting by Weston Ruter. Note that some of this code won’t transfer seamlessly to, say a custom post type scenario without some adjustments, because it hardcodes for a post type of post.

The Complete Guide to the WordPress Theme Customizer

Daniel Pataki does a good job walking through a more complete tour of what you might be able to accomplish with JS driven logic.

Dependently-Contextual Customizer Controls

Weston Ruter guides you on creating Customizer controls that instantly toggle on or off depending on state using client-side logic. (see related gist)

Resetting the Customizer to a Blank Slate

A useful starting point if you want to create a dedicated customizer setup that is separate from the default experience.

Customizer tutorials and documentation

An older post by Justin Tadlock grouping some guides and articles on the customizer

And lastly two streams of resources of new guides and updates on the customizer are here:

XWP’s Make Blog Covering The Customizer

And the Make blog covering the customizer on

Make Blog posts Tagged with Customizer

How to commit an existing local project into Bitbucket with SourceTree

If you decide you want to commit a project you have hosted on your machine into BitBucket and you’re using Sourcetree to manage it, you’ll find that there is no straightforward way to do that. When you try to create a new Repo inside Sourcetree, it demands that the project starts in a new, empty folder. There is no option to setup a new repo from existing files. This means it’s actually stupidly impossible to commit existing project files into a fresh repository in one smooth operation.

People have posted alternative ways of getting around this but the simplest way to do it goes like this:

  1. Create a repo inside BitBucket
  2. Create a new folder on your machine which will act as a placeholder
  3. In SourceTree go through the new repository dialogs and link it to the repo on Bitbucket and the folder you created in step 2.
  4. After completing step 3 there will be a .git folder in your placeholder folder, move it to where you actual project files exist
  5. SourceTree will automatically figure out that the folder was moved, you can delete this bookmark
  6. Re-add the project by dragging the folder containing your project files and .git folder into SourceTree
  7. Now you can commit your files into BitBucket from SourceTree

It’s the easiest way because it takes advantage of the fact that .git folders can be easily moved without messing things up in SourceTree.

Why anybody doing computer work should use gaming equipment

The many benefits of hotkeys

I’ve always been keen on hotkeys as they help you get stuff done faster as well reduce the amount of friction you get from having to do repetitive operations. It’s a huge time saver. These wins you get with hotkeys also compound over time to make those few seconds saved per operation grow into hours. And last but not least, when you are in the zone with your writing or your designing, your drawing or your programming, you want to stay in the flow! Hotkeys help you stay in the flow by reducing the amount of time navigating the screen, typing, searching for what you need and contorting your fingers.

Keyboards and mice with programmable keys

So I’ve always paid attention to input devices that provide extra keys, but for some strange reason regular keyboards aimed at those doing computer work rarely come outfitted with a meaningful amount of programmable keys. But hardware companies do cater to gamers and they happen to love hotkeys. For this reason, if you want to maximize the utility you can get from hotkeys, you are best looking at some gaming equipment. These devices may look designed for a younger audience but they are more than equipped to deal with a professional workload. They are designed for precision, endurance, responsiveness and programmability on an order of magnitude more than regular consumer products. In other words, if you do serious computer work, use gaming equipment.

Most people when they think of programmable keys, they think of keyboards and maybe a mouse with a few extra keys. But my Perdition mouse has 18 programmable keys and has made the most gains for me.

Example use cases & a magical mouse button recipe

Hotkeys can do a variety of things. You can program to output any length of text or key presses. You can of course configure complex keyboard shortcuts into a single button so you don’t have to do finger gymnastics. You can record and play macros and automate complex sequences of commands.

I have fallen in love with my mouse configuration, let me show you the ways:

  • separate buttons for Copy, Paste and Cut. It’s amazing how much work quicker using these buttons is than with regular keyboard presses.
  • a button to bring up clipboard history and paste any item from that history
  • manage virtual desktops by toggling between desktops with separate keys
  • instantly scroll to the top or bottom of a page, something that is very useful in today’s web when pages have gotten more scroll heavy
  • Forward and Back buttons work in almost every program
  • Screen dimming keys (using f.lux) at a finger’s touch
  • zoom in or zoom out by pressing a button and moving the mouse wheel

Recommended Keyboards

Logitech G510s Gaming Keyboard with Game Panel LCD Screen

Logitech G11 Gaming Keyboard (Black/Silver)

SteelSeries Merc Stealth Gaming Keyboard

Due to the SteelSeries Merc Stealth Gaming Keyboard’ many programmable hotkeys, it can boost productivity for writers, designers and programmers
A picture of the Logitech G11, it’s the keyboard I use because it features 18 programmable hotkeys on the side and 3 modes to use those 18 keys for 54 hotkeys.
Logitech’s G510s features 18 programmable hotkeys on the left side and you make 3 configurations with those 18 keys for 54 hotkeys that will boost your productivity with your professional tools

Recommended Mice

Razer Naga Ergonomic MMO Gaming Mouse

This Razer Naga Ergonomic Gaming Mouse boasts 12 thumb buttons, originally geared toward MMO games, it’s perfect for adding a variety of work related hotkeys

SHARKK® Gaming Mouse for the Pro Gamer 16400 DPI High Precision Programmable Laser Gaming Mouse for PC and MMO with Omron Micro Switches 18 Programmable Buttons Weight Tuning Cartridge Gaming Mouse with 12 Side Buttons 5 programmable user profiles

Sharkk’s pro gaming mouse has 18 programmable keys, which is amazing. It blows a normal mouse out of the water as far as productivity goes.

Redragon M901 PERDITION 16400 DPI High-Precision Programmable Laser Gaming Mouse (Black)

Redragon’s Perdition series is the mouse I own and hit has 18 programmable hotkeys and flashy programmable lights to go with it. It’s the best mouse I’ve used for my work flow.

My NBA Season 2015-2016 Predictions

Just for fun!

Rookie of the Year: Emmanuel Mudiay

MVP: Harden

Finals: Warriors – Bulls, Warriors win

Standings prediction:

  1. Warriors
    63 wins. Same team as last year, when they were far and away the best team. All of their young core players now have championship experience
  2. Oklahoma
    60 wins. A fresh coaching philosophy to go with 2 top five players, Ibaka’s defensive anchoring and decent role players should guarantee a Western Conference finals spot
  3. Clippers
    59 wins. On paper, the best team. They have the most productive players in the league at three positions and a deep bench. Chemistry will prevent them from winning
  4. Memphis
    57 wins. Good roster additions and when healthy one of the toughest teams in the league
  5. Rockets
    57 wins. Super deep but no signs that the star players will mesh in a way that makes the whole more than just their parts combined.
  6. Spurs
    54 wins. The best coached team in the league, but will drop off due to poor point guard play, age decline. Aldridge doesn’t amplify what the Spurs do best.
  7. Chicago
    58 wins. A well-coached team, with a very deep line up and the offense to make it work
  8. Cavaliers
    50 wins. I don’t think they’ll be healthy at the start or end of the season. Kevin Love adds as much as he takes away. They succeeded last year through pure will, gutsy play from role players who won’t be on the floor if Irving and Love are playing.
  9. Pelicans
    44 wins. A lot of injury concerns, but the best player in the league can carry them
  10. Hawks
    49 wins. An efficient well-coordinated machine. Not sure if Korver can replicate past successes and will there be friction around Schroeder’s ambitions and the team.
  11. Heat
    48 wins. A dangerous team but there’s not a lot of 3pt scoring and we’ve no idea how the starting 5 gels because they haven’t played together. Feels like a mish mash of some very good pieces.
  12. Wizards
    48 wins. Elite play in the backcourt, solid front court and interesting depth.
  13. Bucks
    47 wins. Offensive upgrades, defensive downgrades should land them around .500 and perhaps even more in the East
  14. Celtics
    45 wins. Excellent coaching, but the roster features no remarkable players, there’s only so much you can do with non-allstar level players. And that ceiling has to be lower than what the Hawks achieved with 4.
  15. Raptors
    44 wins. Firmly belong in the good but not great category
  16. Suns
    42 wins. Well coached, competitive, decent roster but no reason to think they will be any more than an 8 seed
  17. Pistons
    42 wins. Van Gundy can take this squad to the playoffs with a roster complimenting Drummond’s play. But their point guards are iffy and Drummond does not appear to have the kind of hard core determination you see in elite caliber players.
  18. Kings
    42 wins. They will compete almost every night and have a lot of talent, they are only low because of combustibility in their roster makeup.
  19. Pacers
    35 wins. One of the best coaches in the league will get a lot out of any collection of players and Paul George looks good
  20. Timberwolves
    35 wins. Loaded with young talent and some veteran leadership is present as well
  21. Utah
    34 wins. Overrated at this point
  22. Mavericks
    32 wins. Pretty weak roster but enough talent and coaching to get 30+ wins. I predict Deron Williams will be yet another player that didn’t pan out.
  23. Magic
    27 wins. Talented young players that will compete but not be efficient
  24. Denver
    26 wins. Potential rookie of the year candidate, in form Gallinari and improved chemistry with better coach and departure Lawson. Lot of bad teams to run off the court.
  25. Portland
    24 wins. Lillard will be in hero mode almost all the time. That doesn’t win games in today’s NBA
  26. Lakers
    23 wins. So many inefficient shots await them
  27. Nets
    23 wins. Will win some with strong center play out of Lopez
  28. Knicks
    22 wins. Destined to be bad
  29. Hornets
    22 wins. Mediocrity
  30. Sixers
    18 wins. Meh. Excited to see Okafor play.

Sneak peak of new code snippet plugin for WordPress

Writing code examples inside the WordPress editor is a lousy experience with most plugins. Most of them involve writing down shortcodes, using clunky input dialogs and messing with spacing because tab functionality doesn’t work properly. Syntax highlighter implementations also tend to be onerous, they are often clunky and bloaty and load too much stuff. In fact I was so fed up with existing plugins that I stopped posting code tutorials on this site.

Ever since Tinymce got updated to the v4+ branch new things have become possible with the editor. One of the coolest things is the ability to live preview shortcode output right inside the (visual) editor, as well as easily adding a graphical user interface for these shortcodes. It is an order of magnitude more user-friendly. I don’t think any of the existing code plugins have jumped on board the live-preview train yet, so I decided to implement a solution myself.

I made some nice progress with a plugin I have dubbed ‘Code Shower’. Below is a sneak peak.

here’s an example of how a (css) code snippet looks on the front-end:

[codeshower ui_state=”” language=”text%2Fcss” code=”.excited%20%7B%0A%09font-weight%3A%20bold%3B%0A%09font-size%3A%203em%3B%0A%7D”]

And here is a screenshot of how it looks inside the familiar WordPress post editor:

This shows the live preview inside the WordPress editor displaying my css code snippet
This shows the live preview inside the WordPress editor displaying my css code snippet

And below is what the graphical interface looks like when inserting a new code snippet. It still needs some polish, but it should give you an idea.

This is a pop dialog that shows when adding or editing a code snippet inside the editor.
This is a pop dialog that shows when adding or editing a code snippet inside the editor.

There is still some work to do. Right now I am testing the plugin and it does have a dependency on a commercial plugin I’ve developed called Super Content Widget Pro. I’m probably going to make a it free for customers of Super Content Widget Pro, but we’ll see. Would you be interested in a plugin like this? Let me know.