Sommaire :

pour afficher correctement les codes d'un logiciel sur une page web

1 - dans mon cas je voulais utiliser l'editeur javascript "tiny mce"

2 - pouvoir copier coller mes codes et garder les sauts de lignes

probleme 1 : tinymce supprime les "br"( avec l'évolution du code html la balise "br" ne doit quasiment plus être utilisé) et il ne garde pas les retours lignes on va dire "implicites" même si l'ion surligne son texte et que l'on applique "pre"

pour résoudre ce problème il faut un plugin spécifique son nom :

preelementfix

vous pouvez le télécharger à l'adresse :

http://sourceforge.net/tracker/index.php?func=detail&aid=2671750&group_id=103281&atid=738747

une fois téléchargé il faut l'extraire dans le dossier :

tinymce/plugins/preelementfix

et le déclarer dans l'activation de tinymce

tinyMCE.init({
	theme : "advanced",
	theme_advanced_resizing : true,
	mode : "textareas",
	paste_auto_cleanup_on_paste : true,
	remove_linebreaks : false,
	force_p_newlines : false,    force_br_newlines : true,
	plugins : "preelementfix",
	});

ensuite pour avoir un effet sympa insérer le code suivant dans votre css.

pre {
	font-size: 12px;
	padding: 0;
	margin: 20px;
	background: #f0f0f0;
	border-left: 1px solid #ccc;
	line-height: 20px;
	background: url(pre_code_bg.gif) repeat-y left top;
	width: 600px;
	overflow: auto;
	overflow-Y:hidden;
}

pre code {
	margin: 0 0 0 40px;  /*--Left Margin--*/
	padding: 18px 0;
	display: block;
}

sources

http://www.sohtanaka.com/web-design/styling-pre-tags-with-css-code-block/

http://mainelydesign.com/blog/view/performatted-text-tinymce-pre-tag