Added syntax highlighting to dialog boxes, improved look of green box code samples

This commit is contained in:
Victoria Wang 2016-04-18 11:47:23 -07:00
parent 07bffc7d25
commit 837efa7094
7 changed files with 42 additions and 26 deletions

View file

@ -1,13 +1,12 @@
<div class="comic" style="height: 550px; background-image: url(/img/tutorial/ch1pg7.png); background-size: 515px;margin-top:7em">
<div class="dialogue" style="left: 0;top:-50px;">
<div class="dialogue" style="left: 0;top:-70px;">
Now maybe your website needs a list. Here's how an unordered list looks:
<div style="text-align: left; font-weight: bold">
&lt;ul&gt;<br>
&nbsp;&nbsp;&lt;li&gt;websites&lt;/li&gt;
&nbsp;&nbsp;&lt;li&gt;yarn&lt;/li&gt;
&nbsp;&nbsp;&lt;li&gt;catnip&lt;/li&gt;<br>
&lt;/ul&gt;
</div>
<pre style="text-align:left;"><code class="html">&lt;ul&gt;
&lt;li&gt;websites&lt;/li&gt;
&lt;li&gt;yarn&lt;/li&gt;
&lt;li&gt;catnip&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
</div>
<div class="dialogue" style="left: 300px; top: -10px;">
First, add a list to your page, but replace my favorite activities with your own!