Added a UI sample for how to do syntax highlighting text box.

pom.xml

@@ -397,7 +397,7 @@ THE SOFTWARE.
         <plugin>
           <groupId>org.jenkins-ci.tools</groupId>
           <artifactId>maven-hpi-plugin</artifactId>
-          <version>1.72</version>
+          <version>1.73-SNAPSHOT</version>
         </plugin>
       </plugins>
     </pluginManagement>

ui-samples-plugin/src/main/java/jenkins/plugins/ui_samples/SyntaxHighlightedTextArea.java

@@ -0,0 +1,29 @@
+package jenkins.plugins.ui_samples;
+
+import hudson.Extension;
+
+import java.util.Arrays;
+import java.util.List;
+
+/**
+ * Syntax-highlighted text area (powered by CodeMirror).
+ *
+ * @author Kohsuke Kawaguchi
+ */
+@Extension
+public class SyntaxHighlightedTextArea extends UISample {
+    @Override
+    public String getDescription() {
+        return "Syntax-highlighted text area powered by CodeMirror";
+    }
+
+    public List<SourceFile> getSourceFiles() {
+        // TODO: generate this from index
+        return Arrays.asList(new SourceFile(getClass().getSimpleName() + ".java"),
+                new SourceFile("index.groovy"));
+    }
+
+    @Extension
+    public static final class DescriptorImpl extends UISampleDescriptor {
+    }
+}

ui-samples-plugin/src/main/resources/jenkins/plugins/ui_samples/SyntaxHighlightedTextArea/index.groovy

@@ -0,0 +1,37 @@
+def l=namespace(lib.LayoutTagLib)
+def st=namespace("jelly:stapler")
+
+l.layout(title:_("Syntax Highlighted Text Area")) {
+    l.main_panel {
+        h1(_("Syntax Highlighted Text Area"))
+
+        p("CodeMirror can be used to turn ordinary text area into syntax-highlighted content-assistable text area")
+
+        // this loads the necessary JavaScripts, if it hasn't loaded already
+        // the first we load is the mode definition file (mode as in Emacs mode)
+        // the second is the theme.
+        //
+        // for other modes, look for "clike.js" in your IDE and see adjacent folders.
+        st.adjunct(includes:"org.kohsuke.stapler.codemirror.mode.clike.clike")
+        st.adjunct(includes:"org.kohsuke.stapler.codemirror.theme.default")
+
+        // adjunct tag doesn't work because 'wroteHEAD' is not set correctly
+
+        // this text area is what we convert to the super text area
+        // we use CSS class to hook up the initialization script. In this particular demo,
+        // the ID attribute can be used, but in more general case (such as when you use this in your Builder, etc.,
+        // a single web page may end up containing multiple instances of such text area, so the CSS class works better.
+        textarea("class":"my-groovy-textbox", style:"width:100%; height:10em")
+
+        // see CodeMirror web site for more about how to control the newly instantiated text area.
+        script("""
+            hudsonRules["TEXTAREA.my-groovy-textbox"] = function(e) {
+                var w = CodeMirror.fromTextArea(e,{
+                  mode:"text/x-groovy",
+                  lineNumbers: true
+                }).getWrapperElement();
+                w.setAttribute("style","border:1px solid black; margin-top: 1em; margin-bottom: 1em")
+            }
+        """)
+    }
+}