fix up highlight.js support and add syntax for code examples, few homework check fixes

This commit is contained in:
Kyle Drake 2016-04-18 10:40:46 -07:00
parent 1f6ef958dc
commit c133252cb6
74 changed files with 29 additions and 4930 deletions

View file

@ -7,7 +7,7 @@
Let's make your name a heading by putting the <strong>h1 tag</strong> around it. This helps to visually separate content on your site.
</div>
<div class="dialogue" style="left: 330px; top: 120px; width: 250px">
Try using an h1 tag by changing the text to something like this: <strong><span id="answer"></span></strong>
Try using an h1 tag by changing the text to something like this:<strong><span id="answer"></span></strong>
and click save.
</div>
</div>
@ -16,20 +16,11 @@
<h4>Heading Tags</h4>
<p>Here are all the heading tags, for all your needs—from the most important to the least!</p>
<pre>
<code class="html">
&lt;h1&gt;Really important heading!&lt;/h1&gt;
&lt;h2&gt;Secondary heading&lt;/h2&gt;
&lt;h3&gt;Tertiary heading&lt;/h3&gt;
&lt;h4&gt;Other heading&lt;/h4&gt;
&lt;h5&gt;Minor heading&lt;/h5&gt;
&lt;h6&gt;Very minor heading&lt;/h6&gt;
</code>
</pre>
<pre><code class="html"><%= erb :'tutorial/html/code_examples/3', layout: false %></code></pre>
</div>
<script>
$('#answer').text(answer)
$('#answer').text('<h1>'+sessionStorage.getItem('name')+'\'s Web Site</h1>')
function checkHomework() {
var html = editor.getValue()

View file

@ -13,26 +13,19 @@
<div class="welcome">
<h4>Nesting</h4>
<p>Tags always need to be nested properly, like Russian dolls. So this is okay:
<pre>
&lt;p&gt;Welcome! &lt;a href="//neocities.org"&gt;Link!&lt;/a&gt;&lt;/p&gt;
</pre>
<p>
Tags always need to be nested properly, like Russian dolls. So this is okay:
<pre><code class="html"><%= erb '<p>Welcome! <a href="//neocities.org">Link!</a></p>', layout: false %></code></pre>
But this is not correct:
But this is not correct:
<pre>
&lt;p&gt;Welcome! &lt;a href="//neocities.org"&gt;Link!&lt;/p&gt;&lt;/a&gt;
</pre>
</p>
<pre><code class="html"><%= erb '<p>Welcome! <a href="//neocities.org">Link!</p></a>', layout: false %></code></pre>
</p>
</div>
<script>
function checkHomework() {
var html = editor.getValue()
/* TODO: Make .+ ignore any spaces or newlines or whatever. </a> lol </p> is fine too. */
var match = '<html.+>.+<body>.+<h1>.+</h1>.+<p>.+<a.+href=".+">.+</a>[^.+]?</p>.+</body>.+</html>'
var re = new XRegExp(match, 'gis')
var p = preview().find('p')
if(p.length == 0) {
@ -57,7 +50,7 @@ But this is not correct:
return
}
if(a.text() == '' || a.text().match(/\s+/)) {
if(a.text() == '') {
notok('You need to add a name for your link, which is the text between the &lt;a&gt; tag, and the closing tag &lt;/a&gt;')
return
}

View file

@ -20,13 +20,7 @@
<div class="welcome">
<h4>Lists</h4>
<p>You can make an ordered (numbered) list like so:</p>
<div style="text-align: left; font-weight: bold">
&lt;ol&gt;<br>
&nbsp;&nbsp;&lt;li&gt;First item&lt;/li&gt;<br>
&nbsp;&nbsp;&lt;li&gt;Second item&lt;/li&gt;<br>
&nbsp;&nbsp;&lt;li&gt;Third item&lt;/li&gt;<br>
&lt;/ol&gt;
</div>
<pre><code class="html"><%= erb :'tutorial/html/code_examples/7_1', layout: false %></code></pre>
</div>
<script>
@ -47,7 +41,7 @@
var liText = ul.find('li').first().text()
if(liText == '' || liText.match(/\s+/)) {
if(liText == '') {
notok("I don't see any text in the <strong>li</strong>. Try using it like this: <strong>&lt;li&gt;Yarn&lt;/li&gt;</strong>")
return
}

View file

@ -10,16 +10,16 @@
<div class="welcome">
<h4>Tags so far</h4>
<p>Headings: <h1>Title of the page!</h1>
<h2>Less important title</h2></p>
<p>Headings: <pre><code class="html"><%= erb "<h1>Title of the page!</h1>\n<h2>Less important title</h2>", layout: false %></pre></code></p>
<p>Paragraphs: <p>Hello!</p></p>
<p>Paragraphs: <pre><code class="html"><%= erb "<p>Hello! This is a paragraph.</p>", layout: false %></code></pre></p>
<p>Links: <a href="http://wikipedia.org">Click here!</a></p>
<p>Links: <pre><code class="html"><%= erb "<a href=\"http://wikipedia.org\">Click here!</a>", layout: false %></code></pre></p>
<p>Images: <img src="hello.png"></p>
<p>Images: <pre><code class="html"><%= erb "<img src=\"myimage.jpg\">", layout: false %></code></pre></p>
<p>Lists</p>
<pre><code class="html"><%= erb "<ul>\n <li>First item</li>\n <li>Second item</li>\n <li>Third item</li>\n</ul>", layout: false %></code></pre>
</div>
<script>