实训TPM的详情页面，参考答案使用codemirror

app/views/challenges/show.html.erb

@@ -1,3 +1,6 @@
+<%= javascript_include_tag "/assets/codemirror/codemirror_python_ruby_c"  %>
+<%= stylesheet_link_tag "/assets/codemirror/codemirror" %>
+
 <div class="task-pm-content mb20">
   <div class="task-pm-box mt20">
     <div class="panel-header clearfix">
@@ -82,9 +85,8 @@
         </li>
         <li class="clearfix">
           <label class=" panel-form-label fl"> 参考答案：</label>
-          <div class="fl task-bg-grey">
+          <div class="fl" id="tpm_answer_show" style="line-height: 1.2"></div>
-            <%= @challenge.answer.blank? ? "无" : (h @challenge.answer.html_safe) %>
+          <div id="hidden_tpm_answer_show" class="undis"><%= @challenge.answer.blank? ? "无" : (h @challenge.answer.html_safe) %></div>
-          </div>
         </li>
         <li class="clearfix">
           <label class="panel-form-label fl"><span class="c_red mr5">*</span>分值设定：</label>
@@ -97,5 +99,17 @@
   </div>
 </div>
 <script>
-    $('#challenge_task_pass').find('img').css("max-width", "680px")
+    $('#challenge_task_pass').find('img').css("max-width", "680px");
+    var tpmMirror = $("#tpm_answer_show")[0];
+    var TpmCodeMirror = CodeMirror(tpmMirror, {
+        value: $("#hidden_tpm_answer_show").text(),
+        mode:  "text/x-java",
+        readOnly: "nocursor", //只读,并隐藏光标
+        //cursorBlinkRate: -1, //隐藏光标
+        autofocus: true,
+        border: 0
+    });
+    $(document).ready(function(){
+        TpmCodeMirror.setSize('700px','auto');//设置版本库codemirror的高度
+    });
 </script>