Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apply Syntax Highlighting For Example Code #255

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions _layout.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<link rel="shortcut icon" href="/img/v-logo.png">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,300,100,200,500,700|Roboto+Mono:400,300,100,200,500" media="none" onload="if(media!='all')media='all'"><noscript><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,300,100,200,500,700|Roboto+Mono:400,300,100,200,500"></noscript>
@css "app.css?43"
<link rel="stylesheet" href="https://unpkg.com/[email protected]/themes/prism-okaidia.min.css">
<!--
<script src="tokenizer.js"></script>
-->
Expand Down Expand Up @@ -58,6 +59,8 @@
@end

@define "footer"
<script src="https://unpkg.com/[email protected]/prism.js"></script>
<script src="https://unpkg.com/[email protected]/components/prism-v.min.js"></script>
</body>
</html>
@end
11 changes: 11 additions & 0 deletions app.css
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,17 @@ textarea:focus {
color: #c5ac41
}

.codeblock pre.language-v {
padding: 0;
background: #334;
padding-bottom: 10px;
}

.codeblock pre code.language-v {
display: block;
line-height: 1.2 !important;
}

.documentation {
display: flex;
justify-content: center;
Expand Down
47 changes: 18 additions & 29 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -176,15 +176,14 @@ <h1 style='font-size:1.85em'>The V Programming Language 0.4 <span style='backgro
<div class='titlebar separator'>
<div class='flex'></div>
</div>
<pre class="hello_devs" id=ex1>fn main() {
<pre class="hello_devs" id=ex1><code class="language-v">fn main() {
areas := [&#39;game&#39;, &#39;web&#39;, &#39;tools&#39;, &#39;science&#39;, &#39;systems&#39;,
&#39;embedded&#39;, &#39;drivers&#39;, &#39;GUI&#39;, &#39;mobile&#39;]
for area in areas {
println(&#39;Hello, ${area} developers!&#39;)
}
}</pre>
<pre class="hello_devs" id=ex2 style='display:none'>
// Print file lines that start with "DEBUG:"
}</code></pre>
<pre class="hello_devs" id=ex2 style='display:none'><code class="language-v">// Print file lines that start with "DEBUG:"
import os

// `read_file` returns an optional (`?string`), it must be checked
Expand All @@ -200,20 +199,16 @@ <h1 style='font-size:1.85em'>The V Programming Language 0.4 <span style='backgro
if line.starts_with('DEBUG:') {
println(line)
}
}
</pre>
<pre class="hello_devs" id=ex3 style='display:none'>
import time
}</code></pre>
<pre class="hello_devs" id=ex3 style='display:none'><code class="language-v">import time
import net.http
resp := http.get('https://vlang.io/utc_now') or {
println('failed to fetch data from the server')
return
}
t := time.unix(resp.body.int())
println(t.format()) // 2019-08-16 17:48
</pre>
<pre class="hello_devs" id=ex4 style='display:none'>
import json
println(t.format()) // 2019-08-16 17:48</code></pre>
<pre class="hello_devs" id=ex4 style='display:none'><code class="language-v">import json

struct User {
name string
Expand All @@ -238,8 +233,8 @@ <h1 style='font-size:1.85em'>The V Programming Language 0.4 <span style='backgro
println('Cannot register ${user.name}, they are too young')
continue
}
// `user` is declared as `mut` in the for loop,
// modifying it will modify the array
// `user` is declared as `mut` in the for loop,
// modifying it will modify the array
user.register()
}
// Let's encode users again just for fun
Expand All @@ -253,16 +248,12 @@ <h1 style='font-size:1.85em'>The V Programming Language 0.4 <span style='backgro

fn (mut u User) register() {
u.is_registered = true
}
}</code></pre>

</pre>

<pre class="hello_devs" id=ex5 style='display:none'>
import arrays
<pre class="hello_devs" id=ex5 style='display:none'><code class="language-v">import arrays
keys := ['accept', 'Accept', 'ACCEPT', 'Content-Type', 'content-type']
unique_lowercase_keys := arrays.uniq(keys.map(it.to_lower()))
println(unique_lowercase_keys) // ['accept', 'content-type']
</pre>
println(unique_lowercase_keys) // ['accept', 'content-type']</code></pre>

</div>

Expand Down Expand Up @@ -984,7 +975,7 @@ <h2>Friendly error messages</h2>
</div>

<div class="section">
<div class="block">
<div class="block" style="overflow: auto;">
<h2>Powerful built-in web framework Vweb</h2>
<p>Vweb is very fast, it compiles into a single binary (html templates are also compiled), supports hot code reloading
(the website is automatically updated in the browser once you change any .v/.html file).
Expand All @@ -995,13 +986,13 @@ <h2>Powerful built-in web framework Vweb</h2>
<div class='flex'></div>
</div>

<pre><div id="codeblock_hl_93987704">[&#39;/post/:id&#39;]
<pre style="font-size: 80%;"><code class="language-v"><div id="codeblock_hl_93987704">[&#39;/post/:id&#39;]
fn (b Blog) show_post(id int) vweb.Result {
post := b.posts_repo.retrieve(id) or {
return vweb.not_found()
}
return vweb.view(post)
}</div><textarea spellCheck="false" id="codeblock_ta_15447927" class="">[&#39;/post/:id&#39;]
}</div></code><textarea spellCheck="false" id="codeblock_ta_15447927" class="">[&#39;/post/:id&#39;]
fn (b Blog) show_post(id int) vweb.Result {
post := b.posts_repo.retrieve(id) or {
return vweb.not_found()
Expand Down Expand Up @@ -1032,7 +1023,7 @@ <h2>Powerful built-in web framework Vweb</h2>
<p><a href="https://github.com/vlang/gitly">Gitly</a>, a light and fast alternative to GitHub/GitLab is built in V and vweb.</p>
</div>

<div class="block">
<div class="block" style="overflow: auto;">
<h2>Built-in ORM</h2>
<p>

Expand All @@ -1042,7 +1033,7 @@ <h2>Built-in ORM</h2>
<div class='flex'></div>
</div>

<pre><div id="codeblock_hl_69524066">import db.sqlite
<pre style="font-size: 80%;"><code class="language-v"><div id="codeblock_hl_69524066">import db.sqlite

struct Customer {
id int
Expand Down Expand Up @@ -1082,9 +1073,7 @@ <h2>Built-in ORM</h2>
sql db {
insert new_customer into Customer
}!
}
</div>
</pre>
}</div></code></pre>
</div>

<script>
Expand Down