Add syntaxhighlighting

css/prism.css

@@ -0,0 +1,148 @@
+/*
+Name: Duotone Space
+Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
+
+Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-space-dark.css)
+Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
+*/
+
+code[class*="language-"],
+pre[class*="language-"] {
+  font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+  font-size: 14px;
+  line-height: 1.375;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  background: #24242e;
+  color: #767693;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #5151e6;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #5151e6;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #5b5b76;
+}
+
+.token.punctuation {
+  color: #5b5b76;
+}
+
+.token.namespace {
+  opacity: .7;
+}
+
+.token.tag,
+.token.operator,
+.token.number {
+  color: #dd672c;
+}
+
+.token.property,
+.token.function {
+  color: #767693;
+}
+
+.token.tag-id,
+.token.selector,
+.token.atrule-id {
+  color: #ebebff;
+}
+
+code.language-javascript,
+.token.attr-name {
+  color: #aaaaca;
+}
+
+code.language-css,
+code.language-scss,
+.token.boolean,
+.token.string,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.language-scss .token.string,
+.style .token.string,
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit,
+.token.statement,
+.token.regex,
+.token.atrule {
+  color: #fe8c52;
+}
+
+.token.placeholder,
+.token.variable {
+  color: #fe8c52;
+}
+
+.token.deleted {
+  text-decoration: line-through;
+}
+
+.token.inserted {
+  border-bottom: 1px dotted #ebebff;
+  text-decoration: none;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.important {
+  color: #aaaaca;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+pre > code.highlight {
+  outline: .4em solid #7676f4;
+  outline-offset: .4em;
+}

js/wpast-prism.js

@@ -0,0 +1,15 @@
+/**
+ * Initialization of Prism with custom options.
+ *
+ * @since 2016-05-20
+ */
+Prism.plugins.NormalizeWhitespace.setDefaults({
+	'remove-trailing': true,
+	'remove-indent': true,
+	'left-trim': true,
+	'right-trim': true,
+	'break-lines': 100,
+	'indent': 0,
+	'tabs-to-spaces': 2,
+	'spaces-to-tabs': 2
+});

wp-admin-style.php

@@ -139,13 +139,14 @@ private function get_plugin_data( $value = 'Version' ) {
 	 */
 	public function add_menu_page() {
 
-		add_menu_page(
+		$page_hook_suffix = add_menu_page(
 			__( 'WordPress Admin Style', 'wp_admin_style' ),
 			__( 'Admin Style', 'wp_admin_style' ),
 			'read',
 			'WordPress_Admin_Style',
 			array( $this, 'get_style_examples' )
 		);
+		add_action( 'admin_print_scripts-' . $page_hook_suffix, array( $this, 'add_highlight_js' ) );
 	}
 
 	/**
@@ -214,10 +215,9 @@ public function get_style_examples() {
 						'Show markup and usage', 'wp_admin_style'
 					) . '</summary>';
 				echo '<section>';
-				echo '<textarea rows="10" cols="30" class="large-text code">' . htmlspecialchars(
+				echo '<pre><code class="language-php-extras">' . htmlspecialchars(
 						file_get_contents( $this->patterns_dir . '/' . $file )
-					) . '</textarea>';
-
+					) . '</code></pre>';
 				echo '</section>';
 				echo '</details><!--/.primer-->';
 				echo '<p><a class="alignright button" href="javascript:void(0);" onclick="window.scrollTo(0,0);" style="margin:3px 0 0 30px;">' . esc_attr__(
@@ -388,4 +388,36 @@ public function donate_link( $plugin_meta, $plugin_file ) {
 		return $plugin_meta;
 	}
 
+	/**
+	 * Register and enqueue script and styles for highlighting source.
+	 *
+	 * @since  2016-05-20
+	 */
+	public function add_highlight_js() {
+
+		wp_register_style(
+			'prism',
+			plugins_url( 'css/prism.css', __FILE__ ),
+			'',
+			'2016-05-20',
+			'screen'
+		);
+		wp_enqueue_style( 'prism' );
+
+		wp_register_script(
+			'prism',
+			plugins_url( 'js/prism.js', __FILE__ ),
+			array(),
+			'2016-05-20',
+			TRUE
+		);
+		wp_register_script(
+			'wpast_prism',
+			plugins_url( 'js/wpast-prism.js', __FILE__ ),
+			array( 'prism' ),
+			'2016-05-20',
+			TRUE
+		);
+		wp_enqueue_script( 'wpast_prism' );
+	}
 } // end class