Ciao, in genere per normali documenti html un modo è quello di sostituire prima di tutto le parentesi angolari < e > con le rispettive entità html < e >. Puoi farlo manualmente oppure usare un qualsiasi servizio online che lo faccia in automatico. Già questo fa in modo che il codice non sia elaborato come markup dal browser.
A quel punto potresti inserire il codice dentro i tag <pre> e <code> per ottenere una specifica formattazione e una corretta semantica. Ad esempio, potrebbe essere una cosa del genere:
codice:<pre><code><a href="javascript:;" onClick="window.open('http://...', 'titolo', 'width=800, height=1000, resizable, status, scrollbars=1, location');"> <img class="alignnone wp-image-13" src="http://..." alt="" width="110" height="22" /></a></code></pre>
Se stai usando WordPress (come intuisco dai riferimenti nel tuo codice) puoi adoperare lo stesso sistema oppure utilizzare degli specifici plugin.
Qui qualche articolo di riferimento:
Display Code Snippets in WordPress Without Using Plugin
How to Display Code Snippets in WordPress Post or Page {WPDIY Guide}
Posting Code Blocks on a WordPress Site
How to Display Code in WordPress Posts