A very common use in writing about programming and webdevelopment is the presentation of code itself. In this article a small test of options to display and share code inside wordpres articles or plain html markup.
Online frontend code editors like jsfiddle.net, codepen.io, jsbin.com, stackblitz.com, repl.it and jsitor.com and beyond frontend ide’s like codesandbox.io, ideone.com or michaelsboost.com/kodeWeave are awesome to prepare code snippets in multiple ways. Besides being able to prepare and adjust your code for publication, most editors provide embed options to present the code directly on other web platforms.
One of my favourites is jsfiddle.net’s iframe embed:
Particulairy for this WordPress environment i’m now using the Urvanov syntax highlighter to present code in different styles like this:
var map, marker;
function initialize() {
var myLatlng = new google.maps.LatLng(52.04952,4.2759),
mapOptions = {
zoom: 19,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var position = new google.maps.LatLng(52.04952,4.2759);
marker = new google.maps.Marker({
position: position,
title: 'Work in progress',
icon: {
url:'https://oddsized.com/webdesign-den-haag/lab/brainmarker.png',
scaledSize: new google.maps.Size(84, 90),
labelOrigin: new google.maps.Point(40,100),
},
map: map,
label: {
text: "Leyweg 924",
color: "black",
fontWeight: "bold",
fontSize: "16px"
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Or this
var map, marker;
function initialize() {
var myLatlng = new google.maps.LatLng(52.04952,4.2759),
mapOptions = {
zoom: 19,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var position = new google.maps.LatLng(52.04952,4.2759);
marker = new google.maps.Marker({
position: position,
title: 'Work in progress',
icon: {
url:'https://oddsized.com/webdesign-den-haag/lab/brainmarker.png',
scaledSize: new google.maps.Size(84, 90),
labelOrigin: new google.maps.Point(40,100),
},
map: map,
label: {
text: "Leyweg 924",
color: "black",
fontWeight: "bold",
fontSize: "16px"
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
and the SyntaxHighlighter Evolved plugin to present code like this:
var map, marker; function initialize() { var myLatlng = new google.maps.LatLng(52.04952,4.2759), mapOptions = { zoom: 19, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true }; var map = new google.maps.Map(document.getElementById('map'), mapOptions); var position = new google.maps.LatLng(52.04952,4.2759); marker = new google.maps.Marker({ position: position, title: 'Work in progress', icon: { url:'https://oddsized.com/webdesign-den-haag/lab/brainmarker.png', scaledSize: new google.maps.Size(84, 90), labelOrigin: new google.maps.Point(40,100), }, map: map, label: { text: "Leyweg 924", color: "black", fontWeight: "bold", fontSize: "16px" } }); } google.maps.event.addDomListener(window, 'load', initialize);
Furthermore i’m still testing Crayon Syntax Highlighter, Enlighter – Customizable Syntax Highlighter, WP-Syntax and iG:Syntax Hiliter, some of which must be pretty straight forward and worth to check out.
Code pasting with many different coding situations and a lot of languages recognized to present correct highlighting is now easily done. After a while, professionally progressively using and researching the real value of these plugins above they might be added to the wp-most-used-plugins repository and this article will be updated with the latest findings.