Add 2 interactive examples
This commit is contained in:
parent
0d4aad83da
commit
ea7889726c
@ -42,7 +42,7 @@
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.markdown pre {
|
||||
.markdown > pre {
|
||||
margin: 0.5em 0;
|
||||
padding: 0.75em 0.75em;
|
||||
color: var(--code-theme-color);
|
||||
|
||||
@ -99,7 +99,7 @@ function highlightCode(lines: Array<string>): string {
|
||||
const codeHtml = highlightCode(trimAndDedent(code));
|
||||
---
|
||||
|
||||
<div class="bg-black text-white rounded"
|
||||
<div class="bg-black text-white rounded px-1"
|
||||
x-data={`{
|
||||
line: 0,
|
||||
stdout: "",
|
||||
@ -110,12 +110,12 @@ const codeHtml = highlightCode(trimAndDedent(code));
|
||||
}`}
|
||||
>
|
||||
<span class="inline-block bg-[var(--code-theme-bg-acolor)] px-2 rounded-tl rounded-tr font-mono text-sm">thp code</span>
|
||||
<pre class="language-thp" style="margin: 0; border-top-left-radius: 0;" data-disabled><code set:html={codeHtml}></code></pre>
|
||||
<pre class="language-thp" style="margin: 0;" data-disabled><code set:html={codeHtml}></code></pre>
|
||||
<div class="grid grid-cols-2 font-mono text-sm">
|
||||
<div>
|
||||
<div class="p-1 border-b border-r border-white">stdout</div>
|
||||
<div class="h-24 p-1 border-r border-white">
|
||||
<code class="bg-black" x-text="stdout"></code>
|
||||
<pre><code class="bg-black" x-text="stdout"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@ -9,7 +9,7 @@ const { frontmatter, headings } = Astro.props;
|
||||
const posts = await Astro.glob("../pages/learn/**/*.{md,mdx}");
|
||||
|
||||
// The index.md page must have a `pagesLayout` frontmatter, which declares the order of all the pages.
|
||||
const indexSubpath = `/learn/index.md`;
|
||||
const indexSubpath = `/learn/index.mdx`;
|
||||
|
||||
const indexPage = posts.find((post) => post.file.endsWith(indexSubpath));
|
||||
|
||||
|
||||
@ -14,36 +14,3 @@ print("Hello, world!")
|
||||
|
||||
Then run `thp hello.thp`
|
||||
|
||||
## Try
|
||||
|
||||
<InteractiveCode
|
||||
code={`
|
||||
val x = 322
|
||||
var y = 322
|
||||
|
||||
fun f(Int a, Int b) {
|
||||
print("hello {a} {b}")
|
||||
}
|
||||
|
||||
f(x, y)
|
||||
`}
|
||||
steps={`[
|
||||
[["line", 1]],
|
||||
[
|
||||
["line", 2],
|
||||
["set", "x", "322"]
|
||||
],
|
||||
[
|
||||
["line", 8],
|
||||
["set", "y", "322"]
|
||||
],
|
||||
[["line", 4]],
|
||||
[["line", 5]],
|
||||
[
|
||||
["out", "gaaaa 322 322"],
|
||||
["line", 6]
|
||||
],
|
||||
[["line", 8]],
|
||||
[["line", 0]]
|
||||
]`}
|
||||
></InteractiveCode>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
layout: ../../../layouts/PagesLayout.astro
|
||||
title: Try/Exceptions
|
||||
---
|
||||
import InteractiveCode from "../../../components/InteractiveCode.astro";
|
||||
|
||||
# Try/exceptions
|
||||
|
||||
@ -62,21 +63,62 @@ via try expressions:
|
||||
|
||||
### Naked try
|
||||
|
||||
Use a naked `try` when you want to rethrow an error, if any.
|
||||
Use a naked `try` when you want to rethrow an error, if there is any.
|
||||
|
||||
```thp
|
||||
// May return an Int or an Exception
|
||||
fun dangerous() -> Int!Exception
|
||||
{...}
|
||||
<InteractiveCode
|
||||
code={`
|
||||
fun dangerous() -> Int!Exception
|
||||
{ // May throw randomly
|
||||
return if Math.random() < 0.5 { 50 }
|
||||
else { Exception("Unlucky") }
|
||||
}
|
||||
|
||||
fun run() -> !Exception
|
||||
{
|
||||
// Use a naked `try` to rethrow if there's an error
|
||||
fun run() -> !Exception
|
||||
{ // If \`dangerous()\` throws, the function exits with the same error.
|
||||
// Otherwise, continues
|
||||
val result = try dangerous()
|
||||
// Here result is `Int`
|
||||
print(result)
|
||||
}
|
||||
```
|
||||
print("The result is {result}")
|
||||
}
|
||||
|
||||
val res1 = run() // First, without error
|
||||
val res2 = run() // Then, an example with error
|
||||
`}
|
||||
steps={`[
|
||||
[["line", 14]],
|
||||
[["line", 7]],
|
||||
[["line", 10]],
|
||||
[["line", 1]],
|
||||
[["line", 3]],
|
||||
[
|
||||
["line", 10],
|
||||
["set", "result", 50]
|
||||
],
|
||||
[["line", 11]],
|
||||
[
|
||||
["line", 14],
|
||||
["out", "The result is 50\\n"],
|
||||
],
|
||||
[
|
||||
["line", 15],
|
||||
["set", "res1", "<empty>"],
|
||||
],
|
||||
[["line", 7]],
|
||||
[["line", 10]],
|
||||
[["line", 1]],
|
||||
[["line", 3]],
|
||||
[["line", 4]],
|
||||
[
|
||||
["line", 10],
|
||||
["set", "result", "Exception(\\"Unlucky\\")"]
|
||||
],
|
||||
[["line", 15]],
|
||||
[
|
||||
["line", 0,],
|
||||
["set", "res2", "Exception(\\"Unlucky\\")"],
|
||||
]
|
||||
]`}
|
||||
></InteractiveCode>
|
||||
|
||||
|
||||
In the previous example:
|
||||
|
||||
@ -46,8 +46,9 @@ pagesLayout:
|
||||
- path: interfaces
|
||||
- path: anonymous
|
||||
- path: magic
|
||||
|
||||
---
|
||||
import InteractiveCode from "../../components/InteractiveCode.astro";
|
||||
|
||||
|
||||
# Welcome
|
||||
|
||||
@ -57,12 +58,49 @@ THP is a new programming language that compiles to PHP.
|
||||
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
This page discusses some of the design decitions of the language,
|
||||
if you want to install THP go to the [installation guide](install)
|
||||
|
||||
If you want to learn the language, go to the learn section.
|
||||
|
||||
## Interactive execution
|
||||
|
||||
The documentation contains snippets of interactive THP code, like this:
|
||||
|
||||
<InteractiveCode
|
||||
code={`
|
||||
val x = "android"
|
||||
var y = 17
|
||||
|
||||
fun f(Int a, Int b) {
|
||||
print("hello, {a} {b}")
|
||||
}
|
||||
|
||||
f(x, y)
|
||||
`}
|
||||
steps={`[
|
||||
[["line", 1]],
|
||||
[
|
||||
["line", 2],
|
||||
["set", "String x", "\\"android\\""]
|
||||
],
|
||||
[
|
||||
["line", 8],
|
||||
["set", "Int y", "17"]
|
||||
],
|
||||
[["line", 4]],
|
||||
[["line", 5]],
|
||||
[
|
||||
["out", "hello, android 17"],
|
||||
["line", 6]
|
||||
],
|
||||
[["line", 8]],
|
||||
[["line", 0]]
|
||||
]`}
|
||||
></InteractiveCode>
|
||||
|
||||
Use the `Step` and `Reset` buttons to emulate the execution of a
|
||||
THP program!
|
||||
|
||||
## Goals
|
||||
|
||||
Loading…
Reference in New Issue
Block a user