Stacks Image 6

Cocco

Code that looks like code.

Title

Display syntax highlighted code snippets directly in your page.

Overview.

Cocco is designed for those that wish to display code snippets on there webpages with syntax highlighting. Cocco provides a quick and easy way of highlighting source code passages in HTML documents, without the need to first encode your source code.

Supports 15 popular coding languages.

  • C
  • C++
  • C#
  • CSS
  • Flex
  • HTML
  • Java
  • Javascript
  • Javascript with Dom
  • Pearl
  • PHP
  • Python
  • Ruby
  • SQL
  • XML

Cooco automatically encodes your raw source code into HTML entities.

Instant download.

Version : 1.0.6

Responsive : Yes

First released : 19/5/2014

Last Updated : 7/9/2015

Stacks V 2.0 or greater.

Live demo.

You can see a few live examples of the stack in action below.

HTML : Default settings
These are the default settings for the stack with my own raw HTML source code added.


Some example demo text here
Javascript : Show line numbers
The same as above with line numbers turned on and my own raw javascript source code added.
$(document).ready(function() {

	function HtmlEncode(s)
	{
	  var el = document.createElement("div");
	  el.innerText = el.textContent = s;
	  s = el.innerHTML;
	  return s;
	}

});
Example of user customised colours
Here we have edited the stacks colour settings to create our own unique theme for displaying the code.


Some example demo text here

Stacks settings.

In this section we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Stacks Image 243
Language

Select from 1 of 15 available coding languages to use inside the code display box. (see overview).

Show line numbers

Show or hide the line numbers in the code display box.

Background

The background colour of the code display box.

Border

The colour of the border around the code display box.u.

Radius

The roundness of the code display box.

Syntax colour pickers

These are the colours used in the code syntax highlighting.

Turn off encoding

If you have pre-encoded code, then you can stop the stack from encoding it again here. Recommended you just use plain text in the stack, and allow it to encode for you.

Stacks edit mode.

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

Stacks Image 297

In edit mode you will see a visual representation of the colours you chose and how they will be used in the code box. You may double click the lower area to enter your raw code or paste it directly inside.

Stacks FAQ.

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

Known compatibility issues

There are no known compatibility issues with this stack.

Stack installation

Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Secure checkout.

We trust PayPal as our secure checkout provider.

Don't have a PayPal account? No worries. PayPal allows you to pay with your credit card if you do not have an account set-up.

Instant download.

Stacks Image 589
Cocco Stack

© 2018 Doobox Software. Building premium Software Mac & RapidWeaver™

Cocco Stack