Code

Introduction

A simple HTML button.

Helium View Reference

Plain HTML

Output widget

<div class="widget-container">
	<div class="widget code-container ui-corner-all">
		<pre id="w0" class="code">
			<span class="codeline">select * from person;</span>
		</pre>
	</div>
</div>

JavaScript / jQuery

Output widget - Programmatically

function drawCodeExample() {
    var canvas = $('<div />').addClass('widget-container');
    var codeContainer = $('<div />').addClass('widget code-container ui-corner-all');
    var captionContainer = $('<div />').addClass('caption-container');
    $('<span />', {
        text: 'Code example'
    }).addClass('caption').appendTo(captionContainer);  
    captionContainer.appendTo(codeContainer);
    var codeContent = $('<pre />', {
        'id': 'w0'
    }).addClass("code").appendTo(codeContainer);
    var lines = ['select * from person', 'select * from person where _id_ = ...']
    for (var i = 0; i < lines.length; i++) {
        $('<span />', {
            'text': lines[i]
        }).addClass("codeline").appendTo(codeContent);
    }
    codeContainer.appendTo(canvas);
    canvas.appendTo($('#embeddedComponentContent'));
}