Для разгрузки файлов с примерами было принято решение вынести куски кода ,которые являются статическими в отдельные файлы и подключать при помощи jsp:include.
tail.jsp
В tail.jsp вошли строки :
<p><h2>Исходный код :</h2></p>
<pre style="width: auto; font-size: 15px;"><code id="jspCode"></code></pre>
В тег pre и code вставляется исходный код примера. В теге pre задана минимальная стилизация , относительно ширины поля и размерности шрифта.
В теге code задан id , с помощью id скрипт которой посылает запрос к сервлету, вставляет исходный код.
<p>
<a href="<%=request.getContextPath()%>/sources/jsp-course/<%=request.getParameter("name")%>" class="button teal" target="_blank">Показать весь код страницы в отдельной вкладке</a>
</p>
Тег а отвечает за кнопку "Показать весь код страницы в отдельной вкладке". В нем задана ссылка , класс для стилизации "button teal" и target который отвечает за то чтобы исходный код открывался в другой вкладке.
<p><h2>Теория :</h2></p>
<iframe height="300px" src="http:pageId")%>"></iframe>
<p>
<a href="http: class="button teal" target="_blank">head.jsp</a>
<a href="http: class="button teal" target="_blank">tail.jsp</a>
</p>
В iframe загружается страница с теорией в нем так же задана высота в 300 px. Ссылка формируется опираясь на параметр "pageId" , который пришел на страницу. Параметр отвечает за то, какая страница с теорией будет вставлена. pageId можно посмотреть на странице с теорией которую вы создали.
В остальных тегах a находятся ссылки на описание статистических страниц tail.jsp и head.jsp.
<script>
$( document ).ready(function() {
codeLoad("<%=request.getContextPath()%>/sources/jsp-course/<%=request.getParameter("name")%>",
$("#jspCode"));
});
</script>
Скрипт предназначенный для запроса к сервлету. В функцию посылается нужная страница и id элементу куда надо вставить код. При загрузке страницы , загружается код.