Hex0r is some simple javascript that shows a hex viewer for binary or non-binary data.

All parameters should be on a div of class "hex04window". Data attributes are used to control it.

Example

<div class="hex0rwindow" data-row-width="16" data-word-size="1" data-row-break="8"
        data-trim="true" data-base64="true" data-caption="Hex0r Example - base 64 file"
        data-highlights="" data-show-line-nums="true">
       Some data to show in the viewer
</div>

• row_width The number of bytes to show per row
• word-size The word size to show. Allows you to show the binary data in 1, 2 or 4 (or more) byte groups.
• row-break Break between groups
• trim Trim whitespace
• base64 Base 64 decode the data in the div (if false, will show exactly that is in the div)
• caption The bottom caption for the viewer
• highlights Highlight areas of the viewer hex
• show-line-nums Determines parts of the binary data to be highlighted. This string takes the format of a comma separated list of values where each highlight is a tuple of 4 values: start_offset:end_offset:color:description. For example, here is a single highlight: 4:20:#F4FA58:This is an interesting part And here is a list of two highlights: 4:20:#F4FA58:This is an interesting part,36:56:#54FAF8:This is another interesting part

Take a look at hex04_example.html for the sample.

You will need to include jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

Include the style sheet

<link rel="stylesheet" type="text/css" href="hex0r.css" />

Create a div for class hex04rwindow, fill out the params, and, inside the div, include the data you would like to show the viewer. Any number of viewers can be on a page.

<div class="hex0rwindow" data-row-width="16" data-word-size="1" data-row-break="8"
    data-trim="true" data-base64="true" data-caption="Hex0r Example - base 64 file, with highlighting"
    data-highlights="16:17:#F4FA58:Initial value of SP register,128:152:#54FAF8:Portable Executable signature and header"
    data-show-line-nums="true" title="">
    /9j/4AAQSkZJRgABAQEASABIAAD/4RzmRXhpZgAATU0AKgAAAAgADAEPAAIAAAAJ AAAAngEQAAIAAAAQAAAAqAESAAMAAAABAAEAAAEaAAUAAAABAAAAuAEbAAUAAAAB
    AAAAwAEoAAMAAAABAAIAAAExAAIAAAAvAAAAyAEyAAIAAAAUAAAA+AITAAMAAAAB AAIAAIKYAAIAAAAFAAABDIdpAAQAAAABAAABEsSlAAcAAAAcAAAEkAAABKxGVUpJ
    RklMTQAARmluZVBpeCBGNDU1ICAgAAAAAEgAAAABAAAASAAAAA==
</div>