Skip to content

Apply Syntax Highlighting For Example Code #255

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.

Sign up for GitHub

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

Open
ZihxS wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Apply Syntax Highlighting For Example Code #255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d78fc02
apply syntax highlighting
ZihxS May 11, 2024
8159fb3
fix comment position
ZihxS May 11, 2024
ab939bb
Merge branch 'master' into enhance/apply-syntax-highlighting
ZihxS Oct 7, 2025
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
View file
Open in desktop
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/prismjs@1.29.0/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/prismjs@1.29.0/prism.js"></script>
<script src="https://unpkg.com/prismjs@1.29.0/components/prism-v.min.js"></script>
</body>
</html>
@end
11 changes: 11 additions & 0 deletions app.css
View file
Open in desktop
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
43 changes: 16 additions & 27 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,15 +221,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 @@ -245,20 +244,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 @@ -283,8 +278,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 @@ -298,16 +293,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
}

</pre>
}</code></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 @@ -1359,7 +1350,7 @@ <h2>Powerful built-in web framework Veb</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) veb.Result {
post := b.posts_repo.retrieve(id) or {
return veb.not_found()
Expand Down Expand Up @@ -1396,7 +1387,7 @@ <h2>Powerful built-in web framework Veb</h2>
<p><a href="https://github.com/vlang/gitly">Gitly</a>, a light and fast alternative to GitHub/GitLab is built in V and Veb.</p>
</div>

<div class="block">
<div class="block" style="overflow: auto;">
<a target=_blank href='https://github.com/vlang/gitly'><img style='width:500px' src='https://user-images.githubusercontent.com/687996/85933714-b195fe80-b8da-11ea-9ddd-09cadc2103e4.png'></a>
</div>

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

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

<span class="keyword">struct</span> Customer {
id <span class="keyword">int</span>
Expand Down Expand Up @@ -1453,9 +1444,7 @@ <h2>Built-in ORM</h2>
<span class="keyword">sql</span> db {
<span class="keyword">insert</span> new_customer <span class="keyword">into</span> Customer
}!
}</div></pre>


}</div></code></pre>
</div>

</div>
Expand Down