Index: lams_common/src/java/org/lamsfoundation/lams/qb/model/QbQuestion.java
===================================================================
diff -u -r6bab11b98a1dfdcebfb7e11b8dcfab3128a2ff83 -r3b83454706f152d81a25b6c08444ceb3ce964638
--- lams_common/src/java/org/lamsfoundation/lams/qb/model/QbQuestion.java	(.../QbQuestion.java)	(revision 6bab11b98a1dfdcebfb7e11b8dcfab3128a2ff83)
+++ lams_common/src/java/org/lamsfoundation/lams/qb/model/QbQuestion.java	(.../QbQuestion.java)	(revision 3b83454706f152d81a25b6c08444ceb3ce964638)
@@ -492,6 +492,18 @@
 	this.codeStyle = codeStyle;
     }
 
+    public String getCodeStyleMime() {
+	switch (codeStyle) {
+	    case 1:
+		return "text/x-java";
+	    case 2:
+		return "text/javascript";
+	    case 3:
+		return "text/x-python";
+	}
+	return null;
+    }
+
     public boolean isHedgingJustificationEnabled() {
 	return hedgingJustificationEnabled;
     }
Index: lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/dto/QuestionDTO.java
===================================================================
diff -u -rf86d00ef0e3fc17667feabcec9a04b4b3ca4d619 -r3b83454706f152d81a25b6c08444ceb3ce964638
--- lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/dto/QuestionDTO.java	(.../QuestionDTO.java)	(revision f86d00ef0e3fc17667feabcec9a04b4b3ca4d619)
+++ lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/dto/QuestionDTO.java	(.../QuestionDTO.java)	(revision 3b83454706f152d81a25b6c08444ceb3ce964638)
@@ -342,6 +342,18 @@
 	this.codeStyle = codeStyle;
     }
 
+    public String getCodeStyleMime() {
+	switch (codeStyle) {
+	    case 1:
+		return "text/x-java";
+	    case 2:
+		return "text/javascript";
+	    case 3:
+		return "text/x-python";
+	}
+	return null;
+    }
+
     public boolean isHedgingJustificationEnabled() {
 	return hedgingJustificationEnabled;
     }
Index: lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/MonitoringController.java
===================================================================
diff -u -rf299a43b38f1c06f1c9a0810b3ae6205b10e0269 -r3b83454706f152d81a25b6c08444ceb3ce964638
--- lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/MonitoringController.java	(.../MonitoringController.java)	(revision f299a43b38f1c06f1c9a0810b3ae6205b10e0269)
+++ lams_tool_assessment/src/java/org/lamsfoundation/lams/tool/assessment/web/controller/MonitoringController.java	(.../MonitoringController.java)	(revision 3b83454706f152d81a25b6c08444ceb3ce964638)
@@ -72,6 +72,7 @@
 import org.lamsfoundation.lams.tool.assessment.dto.QuestionSummary;
 import org.lamsfoundation.lams.tool.assessment.dto.ReflectDTO;
 import org.lamsfoundation.lams.tool.assessment.dto.UserSummary;
+import org.lamsfoundation.lams.tool.assessment.dto.UserSummaryItem;
 import org.lamsfoundation.lams.tool.assessment.model.Assessment;
 import org.lamsfoundation.lams.tool.assessment.model.AssessmentQuestion;
 import org.lamsfoundation.lams.tool.assessment.model.AssessmentQuestionResult;
@@ -206,6 +207,7 @@
 	// display student choices only if all questions are multiple choice
 	boolean displayStudentChoices = true;
 	int maxOptionsInQuestion = 0;
+
 	for (AssessmentQuestion question : assessment.getQuestions()) {
 	    if (question.getType() == QbQuestion.TYPE_MULTIPLE_CHOICE) {
 		int optionsInQuestion = question.getQbQuestion().getQbOptions().size();
@@ -240,6 +242,14 @@
 	    request.setAttribute("questions", questionDtos);
 	}
 
+	// lists all code styles used in this assessment
+	Set<Integer> codeStyles = questionList.stream().filter(q -> q.getQbQuestion().getCodeStyle() != null)
+		.collect(Collectors.mapping(q -> q.getQbQuestion().getCodeStyle(), Collectors.toSet()));
+
+	if (!codeStyles.isEmpty()) {
+	    request.setAttribute(AssessmentConstants.ATTR_CODE_STYLES, codeStyles);
+	}
+
 	return "pages/monitoring/monitoring";
     }
 
@@ -355,6 +365,15 @@
 	request.setAttribute(AssessmentConstants.ATTR_IS_QUESTION_ETHERPAD_ENABLED, questionEtherpadEnabled);
 	request.setAttribute(AssessmentConstants.ATTR_TOOL_SESSION_ID, sessionId);
 
+	// lists all code styles used in this assessment
+	Set<Integer> codeStyles = userSummary.getUserSummaryItems().stream().map(UserSummaryItem::getQuestionDto)
+		.filter(q -> q.getCodeStyle() != null)
+		.collect(Collectors.mapping(q -> q.getCodeStyle(), Collectors.toSet()));
+
+	if (!codeStyles.isEmpty()) {
+	    request.setAttribute(AssessmentConstants.ATTR_CODE_STYLES, codeStyles);
+	}
+
 	return "pages/monitoring/parts/usersummary";
     }
 
Index: lams_tool_assessment/web/pages/learning/parts/essay.jsp
===================================================================
diff -u -r755036878445ffcbb4eae88f620229662e881fbb -r3b83454706f152d81a25b6c08444ceb3ce964638
--- lams_tool_assessment/web/pages/learning/parts/essay.jsp	(.../essay.jsp)	(revision 755036878445ffcbb4eae88f620229662e881fbb)
+++ lams_tool_assessment/web/pages/learning/parts/essay.jsp	(.../essay.jsp)	(revision 3b83454706f152d81a25b6c08444ceb3ce964638)
@@ -58,19 +58,9 @@
 		$(document).ready(function() {
 			var codeArea = $('#essay-question${status.index}'),
 				codeMirror = CodeMirror.fromTextArea(codeArea[0], {
-					'mode' : 
-						<c:choose>
-							<c:when test="${question.codeStyle == 1}">
-								'text/x-java'
-							</c:when>
-							<c:when test="${question.codeStyle == 2}">
-								'text/javascript'
-							</c:when>
-							<c:when test="${question.codeStyle == 3}">
-								'text/x-python'
-							</c:when>
-						</c:choose>
+					'mode' : '${question.codeStyleMime}'
 				}),
+				// on the back end we keep essay answer lines <BR>-separated, but CodeMirror uses \n
 				content = codeMirror.getValue().replaceAll('<BR>', '\n');
 			codeMirror.setValue(content);
 		});
Index: lams_tool_assessment/web/pages/learning/results.jsp
===================================================================
diff -u -rbfe812441181f7772a30d7ec2c6b043e1603fd2a -r3b83454706f152d81a25b6c08444ceb3ce964638
--- lams_tool_assessment/web/pages/learning/results.jsp	(.../results.jsp)	(revision bfe812441181f7772a30d7ec2c6b043e1603fd2a)
+++ lams_tool_assessment/web/pages/learning/results.jsp	(.../results.jsp)	(revision 3b83454706f152d81a25b6c08444ceb3ce964638)
@@ -9,9 +9,11 @@
 	<lams:css suffix="jquery.jRating"/>
 	<c:if test="${not empty codeStyles}">
 		<link rel="stylesheet" type="text/css" href="${lams}css/codemirror.css" />
+		<link rel="stylesheet" type="text/css" href="${lams}css/codemirror_simplescrollbars.css" />
 		<style>
 			pre {
 				background-color: initial;
+				border: none;
 			}
 		</style>
 	</c:if>
Index: lams_tool_assessment/web/pages/learning/results/essay.jsp
===================================================================
diff -u -rbfe812441181f7772a30d7ec2c6b043e1603fd2a -r3b83454706f152d81a25b6c08444ceb3ce964638
--- lams_tool_assessment/web/pages/learning/results/essay.jsp	(.../essay.jsp)	(revision bfe812441181f7772a30d7ec2c6b043e1603fd2a)
+++ lams_tool_assessment/web/pages/learning/results/essay.jsp	(.../essay.jsp)	(revision 3b83454706f152d81a25b6c08444ceb3ce964638)
@@ -13,15 +13,9 @@
 						<c:when test="${empty question.codeStyle}">
 							${question.answer}
 						</c:when>
-						<c:when test="${question.codeStyle == 1}">
-							<pre class="code-style" data-lang="text/x-java">${question.answer}</pre>
-						</c:when>
-						<c:when test="${question.codeStyle == 2}">
-							<pre class="code-style" data-lang="text/javascript">${question.answer}</pre>
-						</c:when>
-						<c:when test="${question.codeStyle == 3}">
-							<pre class="code-style" data-lang="text/x-python">${question.answer}</pre>
-						</c:when>
+						<c:otherwise>
+							<pre class="code-style" data-lang="${question.codeStyleMime}">${question.answer}</pre>
+						</c:otherwise>
 					</c:choose>
 				</td>
 			</tr>
Index: lams_tool_assessment/web/pages/monitoring/monitoring.jsp
===================================================================
diff -u -r1a6408137fed60838b5744155f0884381c37d2c0 -r3b83454706f152d81a25b6c08444ceb3ce964638
--- lams_tool_assessment/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 1a6408137fed60838b5744155f0884381c37d2c0)
+++ lams_tool_assessment/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 3b83454706f152d81a25b6c08444ceb3ce964638)
@@ -14,7 +14,10 @@
 		<link href="${lams}css/free.ui.jqgrid.min.css" rel="stylesheet" type="text/css" >
  		<lams:css suffix="chart"/>
  		<link href="${lams}css/jquery.jqGrid.confidence-level-formattter.css" rel="stylesheet" type="text/css">
- 		
+ 		<c:if test="${not empty codeStyles}">
+			<link rel="stylesheet" type="text/css" href="${lams}css/codemirror.css" />
+		</c:if>
+	
  		<style>
 	 		.ui-jqdialog.ui-jqgrid-bootstrap .ui-jqdialog-titlebar, .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-caption {
 				background-color: #f5f5f5;
@@ -35,6 +38,11 @@
 	  		#completion-charts-container > div {
 	  			padding: 5rem 2rem;
 	  		}
+	  		
+	  		pre {
+				background-color: initial;
+				border: none;
+			}
  		</style>
  		
 		<script type="text/javascript" src="${lams}includes/javascript/portrait.js"></script>
@@ -101,8 +109,26 @@
  		<script type="text/javascript" src="${lams}includes/javascript/download.js"></script>
  		<script type="text/javascript" src="${lams}includes/javascript/portrait.js" ></script>
  		<script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.confidence-level-formattter.js"></script>
-
  		
+		<c:if test="${not empty codeStyles}">
+			<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/runmode-standalone.js"></script>
+			<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/colorize.js"></script>
+		</c:if>
+		<%-- codeStyles is a set, so each code style will be listed only once --%>
+		<c:forEach items="${codeStyles}" var="codeStyle">
+			<c:choose>
+				<c:when test="${codeStyle == 1}">
+					<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/clike.js"></script>
+				</c:when>
+				<c:when test="${codeStyle == 2}">
+					<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/javascript.js"></script>
+				</c:when>
+				<c:when test="${codeStyle == 3}">
+					<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/python.js"></script>
+				</c:when>
+			</c:choose>
+		</c:forEach>
+		
 		<script>        
 		    function doSelectTab(tabId) {
 		    	if ( tabId == 3 )
Index: lams_tool_assessment/web/pages/monitoring/parts/masterDetailLoadUp.jsp
===================================================================
diff -u -rcf0eebcaab1317079c30cb1d4e056ba9dd4ec048 -r3b83454706f152d81a25b6c08444ceb3ce964638
--- lams_tool_assessment/web/pages/monitoring/parts/masterDetailLoadUp.jsp	(.../masterDetailLoadUp.jsp)	(revision cf0eebcaab1317079c30cb1d4e056ba9dd4ec048)
+++ lams_tool_assessment/web/pages/monitoring/parts/masterDetailLoadUp.jsp	(.../masterDetailLoadUp.jsp)	(revision 3b83454706f152d81a25b6c08444ceb3ce964638)
@@ -28,6 +28,10 @@
  	 	    // set maxGrade attribute to cell DOM element
  	 	    table.setCell(${i.index + 1}, "grade", "", null, {"maxGrade" :  "${questionResult.maxMark}"});
 		</c:forEach>
+
+		if (typeof CodeMirror != 'undefined') {
+			CodeMirror.colorize($('.code-style'));
+		}
 	};
 	masterDetailLoadUp();
 </script>
Index: lams_tool_assessment/web/pages/monitoring/parts/questionsummary.jsp
===================================================================
diff -u -rcf0eebcaab1317079c30cb1d4e056ba9dd4ec048 -r3b83454706f152d81a25b6c08444ceb3ce964638
--- lams_tool_assessment/web/pages/monitoring/parts/questionsummary.jsp	(.../questionsummary.jsp)	(revision cf0eebcaab1317079c30cb1d4e056ba9dd4ec048)
+++ lams_tool_assessment/web/pages/monitoring/parts/questionsummary.jsp	(.../questionsummary.jsp)	(revision 3b83454706f152d81a25b6c08444ceb3ce964638)
@@ -14,6 +14,9 @@
 		<link type="text/css" href="${lams}css/jquery-ui-bootstrap-theme.css" rel="stylesheet">
 		<link type="text/css" href="${lams}css/free.ui.jqgrid.min.css" rel="stylesheet">
 		<link type="text/css" href="${lams}css/jquery.jqGrid.confidence-level-formattter.css" rel="stylesheet">
+		<c:if test="${not empty questionDto.codeStyle}">
+			<link rel="stylesheet" type="text/css" href="${lams}css/codemirror.css" />
+		</c:if>
 		<style>
 			.sortable-on {
 				background: lightgoldenrodyellow;
@@ -26,6 +29,10 @@
 			.list-group-item {
 				cursor: pointer;
 			}
+	  		pre {
+				background-color: initial;
+				border: none;
+			}
 		</style>
 		
 		<script>
@@ -58,7 +65,24 @@
 	 	<script type="text/javascript" src="${lams}includes/javascript/portrait.js"></script>
 	 	<script type="text/javascript" src="${lams}includes/javascript/Sortable.js"></script>
 	 	<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/rating.js"></script>
+		<script type="text/javascript" src="${lams}includes/javascript/rating.js"></script> 	
+
+		<c:if test="${not empty questionDto.codeStyle}">
+			<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/runmode-standalone.js"></script>
+			<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/colorize.js"></script>
+			<c:choose>
+				<c:when test="${questionDto.codeStyle == 1}">
+					<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/clike.js"></script>
+				</c:when>
+				<c:when test="${questionDto.codeStyle == 2}">
+					<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/javascript.js"></script>
+				</c:when>
+				<c:when test="${questionDto.codeStyle == 3}">
+					<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/python.js"></script>
+				</c:when>
+			</c:choose>
+		</c:if>
+		
   	    <script>
   	    	var isEdited = false;
   	    	var previousCellValue = "";
@@ -107,7 +131,7 @@
 				  			<c:if test="${questionDto.groupsAnswersDisclosed}">
 				  				{name:'rating', index:'rating', width:120, align:"center", sortable:false, search:false},
 		  			  		</c:if>
-			  			   	{name:'response', index:'response', width:400, sortable:false, search:false},
+			  			   	{name:'response', index:'response', width:400, sortable:false, search:false, formatter: responseFormatter},
 			  				{name:'userId', index:'userId', width:0, hidden: true},
 		  				   	{name:'portraitId', index:'portraitId', width:0, hidden: true}
 	  				   	],
@@ -148,6 +172,10 @@
   						loadComplete: function () {
   							initializeJRating();
   					   	 	initializePortraitPopover('<lams:LAMSURL/>');
+
+	  						if (typeof CodeMirror != 'undefined') {
+	  							CodeMirror.colorize($('.code-style'));
+	  						}
   					    },
   					    subGrid: true,
   						subGridOptions: {
@@ -276,6 +304,11 @@
         			self.parent.tb_remove();
         		}
     		}
+
+    		function responseFormatter (cellvalue) {
+        		var codeStyle = ${empty questionDto.codeStyle ? 'null' : questionDto.codeStyle};
+        		return codeStyle ? "<pre class='code-style' data-lang='${questionDto.codeStyleMime}'>" + cellvalue + "</pre>" : cellvalue;
+    		}
   		</script>
 	</lams:head>
 	
Index: lams_tool_assessment/web/pages/monitoring/parts/userresponse.jsp
===================================================================
diff -u -r10e6a1f74ecf6ba2d60569e9b9677b88ed39650a -r3b83454706f152d81a25b6c08444ceb3ce964638
--- lams_tool_assessment/web/pages/monitoring/parts/userresponse.jsp	(.../userresponse.jsp)	(revision 10e6a1f74ecf6ba2d60569e9b9677b88ed39650a)
+++ lams_tool_assessment/web/pages/monitoring/parts/userresponse.jsp	(.../userresponse.jsp)	(revision 3b83454706f152d81a25b6c08444ceb3ce964638)
@@ -37,7 +37,7 @@
 	<c:when test="${question.type == 3}">
 		responseStr +="${fn:escapeXml(questionResult.answerEscaped)}";
 	</c:when>
-						
+	
 	<c:when test="${question.type == 4}">
 		responseStr +="${questionResult.answerEscaped}";
 	</c:when>
@@ -48,10 +48,14 @@
 		</c:if>
 	</c:when>
 						
-	<c:when test="${question.type == 6}">
+	<c:when test="${question.type == 6 and empty question.codeStyle}">
 		responseStr +="${questionResult.answerEscaped}";
 	</c:when>
-						
+	
+	<c:when test="${question.type == 6}">
+		responseStr +="<pre class='code-style' data-lang='${question.codeStyleMime}'>${questionResult.answerEscaped}</pre>";
+	</c:when>	
+	
 	<c:when test="${question.type == 7}">
 		<c:forEach var="j" begin="0" end="${fn:length(questionResult.optionAnswers) - 1}" step="1">
 			<c:forEach var="optionAnswer" items="${questionResult.optionAnswers}">
Index: lams_tool_assessment/web/pages/monitoring/parts/usersummary.jsp
===================================================================
diff -u -rcf0eebcaab1317079c30cb1d4e056ba9dd4ec048 -r3b83454706f152d81a25b6c08444ceb3ce964638
--- lams_tool_assessment/web/pages/monitoring/parts/usersummary.jsp	(.../usersummary.jsp)	(revision cf0eebcaab1317079c30cb1d4e056ba9dd4ec048)
+++ lams_tool_assessment/web/pages/monitoring/parts/usersummary.jsp	(.../usersummary.jsp)	(revision 3b83454706f152d81a25b6c08444ceb3ce964638)
@@ -10,6 +10,10 @@
 		<link type="text/css" href="${lams}css/jquery-ui-bootstrap-theme.css" rel="stylesheet">
 		<link type="text/css" href="${lams}css/free.ui.jqgrid.min.css" rel="stylesheet">
 		<link type="text/css" href="${lams}css/jquery.jqGrid.confidence-level-formattter.css" rel="stylesheet">
+		<c:if test="${not empty codeStyles}">
+			<link rel="stylesheet" type="text/css" href="${lams}css/codemirror.css" />
+		</c:if>
+	
 		<style>
 			.question-etherpad {
 				padding: 0;
@@ -18,6 +22,11 @@
 			[data-toggle="collapse"].collapsed .if-not-collapsed, [data-toggle="collapse"]:not(.collapsed) .if-collapsed {
 	  			display: none;
 	  		}
+	  		
+	  		pre {
+				background-color: initial;
+				border: none;
+			}
 		</style>
 		
 		<script>
@@ -34,6 +43,26 @@
 		</script>
 		<script type="text/javascript" src="${lams}includes/javascript/free.jquery.jqgrid.min.js"></script>
 	 	<script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.confidence-level-formattter.js"></script>
+	 	
+	 	<c:if test="${not empty codeStyles}">
+			<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/runmode-standalone.js"></script>
+			<script type="text/javascript" src="${lams}includes/javascript/codemirror/addon/runmode/colorize.js"></script>
+		</c:if>
+		<%-- codeStyles is a set, so each code style will be listed only once --%>
+		<c:forEach items="${codeStyles}" var="codeStyle">
+			<c:choose>
+				<c:when test="${codeStyle == 1}">
+					<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/clike.js"></script>
+				</c:when>
+				<c:when test="${codeStyle == 2}">
+					<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/javascript.js"></script>
+				</c:when>
+				<c:when test="${codeStyle == 3}">
+					<script type="text/javascript" src="${lams}includes/javascript/codemirror/mode/python.js"></script>
+				</c:when>
+			</c:choose>
+		</c:forEach>
+		
   	    <script>
 	    	var isEdited = false;
   	    	var previousCellValue = "";  	    	
@@ -151,6 +180,10 @@
 						etherpadInitMethods[groupId]();
 					}
 				});
+
+				if (typeof CodeMirror != 'undefined') {
+					CodeMirror.colorize($('.code-style'));
+				}
 	  		});  	    	
 
     		function refreshSummaryPage()  {