Igor’s Tip of the Week #145: HTML export

MalBot · June 23, 2023, 3:41pm

We’ve covered exporting disassembly from IDA before but it was in context of interoperability, when simple text is enough. If you want to preserve formatting and coloring of IDA View (e.g. for a web page or blog post), taking a screenshot is one option, but that has its downsides (e.g. no indexing for search engines). There is an alternative you can use instead.

HTML export

To export a fragment of disassembly as HTML, select the desired address range in the listing and invoke File > Produce file > Create HTML file…

IDA will ask you for a filename and write the formatted text to it. The result will look like similar to the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>IDA - riscv_lscolors64.elf </title>
</head>
<body class="c41">
<span style="white-space: pre; font-family: Consolas,monospace;" class="c1 c41">
<span class="c44">.text:0000000000005528 </span><span class="c5">addi </span><span class="c33">s4</span><span class="c9">, </span><span class="c33">sp</span><span class="c9">, </span><span class="c12">248h</span><span class="c9">+</span><span class="c25">var_1A0
</span><span class="c44">.text:000000000000552C </span><span class="c5">mv </span><span class="c33">a0</span><span class="c9">, </span><span class="c33">s4
</span><span class="c44">.text:000000000000552E </span><span class="c5">mv </span><span class="c33">a1</span><span class="c9">, </span><span class="c33">s0
</span><span class="c44">.text:0000000000005530 </span><span class="c5">li </span><span class="c33">a2</span><span class="c9">, </span><span class="c12">0A0h
</span><span class="c44">.text:0000000000005534 </span><span class="c5">call </span><span class="c37">memcpy
</span>
</span><style type="text/css">
/* line-fg-default */
.c1 { color: blue; }
/* line-bg-default */
.c41 { background-color: white; }
/* line-pfx-func */
.c44 { color: black; }
/* line-fg-insn */
.c5 { color: navy; }
/* line-fg-register-name */
.c33 { color: navy; }
/* line-fg-punctuation */
.c9 { color: navy; }
/* line-fg-numlit-in-insn */
.c12 { color: green; }
/* line-fg-locvar */
.c25 { color: green; }
/* line-fg-code-name */
.c37 { color: blue; }
</style></body></html>

As you can see, the color tags are represented by CSS classes which can be adjusted if necessary. When opened in browser, the result should look pretty close to IDA View:

We use this feature on our web site to display disassembly snippets for the processor gallery.

Pseudocode to HTML

HTML can be generated not only for disassembly but also for the decompiled pseudocode; for this use “Generate HTML…” from the context menu in the Pseudocode view.