diff --git a/htdocs/admin/tools/ui/class/documentation.class.php b/htdocs/admin/tools/ui/class/documentation.class.php
index 06a919d274f..437c762c0c6 100644
--- a/htdocs/admin/tools/ui/class/documentation.class.php
+++ b/htdocs/admin/tools/ui/class/documentation.class.php
@@ -388,16 +388,16 @@ class Documentation
 	 *    Output a View Code area
 	 *
 	 * @param array $lines Lines of code to show
+	 * @param string $option Source code language ('html', 'php' etc)
 	 * @return void
 	 */
-	public function showCode($lines = array())
+	public function showCode($lines = array(), $option = 'html')
 	{
-		print '<div class="documentation-code"><pre>';
-		if (!empty($lines)) {
-			foreach ($lines as $lineofcode) {
-				print dol_htmlentities($lineofcode).'<br/>';
-			}
-		}
-		print '</pre></div>';
+		require_once DOL_DOCUMENT_ROOT . '/core/class/doleditor.class.php';
+		print '<div class="documentation-code">';
+		$content = implode("\n", $lines);
+		$doleditor = new DolEditor(md5($content), $content, '', 0, 'Basic', 'In', true, false, 'ace', 0, '99%', 1);
+		print $doleditor->Create(1, '', false, '', $option);
+		print '</div>';
 	}
 }
diff --git a/htdocs/admin/tools/ui/components/badges.php b/htdocs/admin/tools/ui/components/badges.php
index 1fbe2947b25..0d147b603be 100644
--- a/htdocs/admin/tools/ui/components/badges.php
+++ b/htdocs/admin/tools/ui/components/badges.php
@@ -41,8 +41,13 @@ $langs->load('uxdocumentation');
 //
 $documentation = new Documentation($db);
 
+$morejs = [
+	'/includes/ace/src/ace.js',
+	'/includes/ace/src/ext-statusbar.js',
+	'/includes/ace/src/ext-language_tools.js',
+];
 // Output html head + body - Param is Title
-$documentation->docHeader('Badges');
+$documentation->docHeader('Badges', $morejs);
 
 // Set view for menu and breadcrumb
 // Menu must be set in constructor of documentation class
diff --git a/htdocs/admin/tools/ui/components/buttons.php b/htdocs/admin/tools/ui/components/buttons.php
index b2a947ebe17..63aabb3c586 100644
--- a/htdocs/admin/tools/ui/components/buttons.php
+++ b/htdocs/admin/tools/ui/components/buttons.php
@@ -40,9 +40,13 @@ $langs->load('uxdocumentation');
 
 //
 $documentation = new Documentation($db);
-
+$morejs = [
+	'/includes/ace/src/ace.js',
+	'/includes/ace/src/ext-statusbar.js',
+	'/includes/ace/src/ext-language_tools.js',
+];
 // Output html head + body - Param is Title
-$documentation->docHeader('Buttons');
+$documentation->docHeader('Buttons', $morejs);
 
 // Set view for menu and breadcrumb
 // Menu must be set in constructor of documentation class
@@ -131,7 +135,7 @@ $documentation->showSidebar(); ?>
 				' */',
 				'print dolGetButtonAction($label, $html, $actionType, $url, $id, $userRight, $params);',
 			);
-			echo $documentation->showCode($lines); ?>
+			echo $documentation->showCode($lines, 'php'); ?>
 		</div>
 
 		<!-- Example of modal usage -->
@@ -198,7 +202,7 @@ $documentation->showSidebar(); ?>
 				'',
 				'print dolGetButtonAction($label, $html, $actionType, $url, $id, $userRight, $params);',
 			);
-			echo $documentation->showCode($lines); ?>
+			echo $documentation->showCode($lines, 'php'); ?>
 		</div>
 
 		<!-- Example of subbutton usage -->
@@ -255,7 +259,7 @@ $documentation->showSidebar(); ?>
 				');',
 				'print dolGetButtonAction($label, $html, $actionType, $url, $id, $userRight, $params);'
 			);
-			echo $documentation->showCode($lines); ?>
+			echo $documentation->showCode($lines, 'php'); ?>
 		</div>
 
 
@@ -282,7 +286,7 @@ $documentation->showSidebar(); ?>
 				'print \' <button class="btn-low-emphasis --btn-icon" title="\'.dol_escape_htmltag($btnLabel).\'" aria-label="\'.dol_escape_htmltag($btnLabel).\'" >\'.img_picto($btnLabel, \'eraser\', \'aria-hidden="true"\', 0, 0, 1).\'</button>\';',
 
 			);
-			echo $documentation->showCode($lines); ?>
+			echo $documentation->showCode($lines, 'php'); ?>
 		</div>
 
 		<!-- Example of subbutton usage -->
@@ -322,7 +326,7 @@ $documentation->showSidebar(); ?>
 				<?php
 
 
-				$btnLabel = $langs->trans('Label');
+				$btnLabel = $langs->trans('Label', 'php');
 				print dolGetButtonTitle($btnLabel, '', 'fa fa-download', '#', '', 0, ['forcenohideoftext'=>1]); // Not Enough Permissions
 				print dolGetButtonTitle($btnLabel, '', 'fa fa-download', '#', '', 1, ['forcenohideoftext'=>1]); // Active
 				print dolGetButtonTitle($btnLabel, '', 'fa fa-download', '#', '', 2, ['forcenohideoftext'=>1]); // Active and selected
@@ -348,15 +352,9 @@ $documentation->showSidebar(); ?>
 				'$status = -2; // Disabled without info',
 				'print dolGetButtonTitle($btnLabel, \'\', \'fa fa-download\', \'#\', \'\', $status, [\'forcenohideoftext\'=>1]);',
 			);
-			echo $documentation->showCode($lines); ?>
+			echo $documentation->showCode($lines, 'php'); ?>
 		</div>
 
-
-
-
-
-
-
 	</div>
 
 </div>
diff --git a/htdocs/admin/tools/ui/components/event-message.php b/htdocs/admin/tools/ui/components/event-message.php
index 78a038e0141..f612f05a0c2 100644
--- a/htdocs/admin/tools/ui/components/event-message.php
+++ b/htdocs/admin/tools/ui/components/event-message.php
@@ -57,9 +57,13 @@ if ($action == 'displayeventmessage') {
 
 //
 $documentation = new Documentation($db);
-
+$morejs = [
+	'/includes/ace/src/ace.js',
+	'/includes/ace/src/ext-statusbar.js',
+	'/includes/ace/src/ext-language_tools.js',
+];
 // Output html head + body - Param is Title
-$documentation->docHeader('SetEventMessages');
+$documentation->docHeader('SetEventMessages', $morejs);
 
 // Set view for menu and breadcrumb
 // Menu must be set in constructor of documentation class
@@ -123,7 +127,7 @@ $documentation->showSidebar(); ?>
 					'setEventMessages("message", null);',
 					'setEventMessages(null, messages[]);',
 			);
-			echo $documentation->showCode($lines); ?>
+			echo $documentation->showCode($lines, 'php'); ?>
 		</div>
 
 		<!-- Contextual variations -->
@@ -158,11 +162,12 @@ $documentation->showSidebar(); ?>
 			</div>
 			<?php
 			$lines = array(
+				'<?php',
 				'setEventMessages("message", null)',
 				'setEventMessages("message", null, "warnings")',
 				'setEventMessages("message", null, "errors")'
 			);
-			echo $documentation->showCode($lines); ?>
+			echo $documentation->showCode($lines, 'php'); ?>
 		</div>
 		<!--  -->
 	</div>
diff --git a/htdocs/admin/tools/ui/components/progress-bars.php b/htdocs/admin/tools/ui/components/progress-bars.php
index 1e290584423..fda0b0527fc 100644
--- a/htdocs/admin/tools/ui/components/progress-bars.php
+++ b/htdocs/admin/tools/ui/components/progress-bars.php
@@ -41,8 +41,13 @@ $langs->load('uxdocumentation');
 //
 $documentation = new Documentation($db);
 
+$morejs = [
+	'/includes/ace/src/ace.js',
+	'/includes/ace/src/ext-statusbar.js',
+	'/includes/ace/src/ext-language_tools.js',
+];
 // Output html head + body - Param is Title
-$documentation->docHeader('Progress-bars');
+$documentation->docHeader('Progress-bars', $morejs);
 
 // Set view for menu and breadcrumb
 // Menu must be set in constructor of documentation class
@@ -250,6 +255,7 @@ $documentation->showSidebar(); ?>
 					'    <div class="progress-bar progress-bar-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>',
 					'</div>',
 					'',
+					'',
 
 				);
 				echo $documentation->showCode($lines); ?>