Files
hi-language.github.io/index.html

90 lines
3.3 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hi: A Symbolic Programming Language</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<!-- Markdown & Highlighting Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.8.1/github-markdown-light.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<!-- Markdown-it and Highlight.js -->
<script src="https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/dist/markdown-it.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
<style>
body {
font-family: 'Poppins', sans-serif;
background-color: #f9fafb; /* bg-gray-50 */
}
.markdown-body {
font-size: 14px;
line-height: 1.7;
background-color: transparent;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
font-family: 'Poppins', sans-serif;
font-weight: 600;
border-bottom-color: #e5e7eb; /* border-gray-200 */
}
.markdown-body pre {
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 0.75rem;
padding: 1rem;
overflow-x: auto;
}
.markdown-body code {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-variant-ligatures: none;
}
:not(pre) > code {
font-size: 85%;
padding: .2em .4em;
margin: 0;
border-radius: 6px;
background-color: rgba(175, 184, 193, 0.2);
}
.hi-button {
font-family: 'JetBrains Mono', monospace;
}
</style>
</head>
<body class="text-gray-900 selection:bg-cyan-400/20">
<header class="sticky top-0 z-20 bg-white/80 backdrop-blur-sm border-b border-gray-200">
<div class="mx-auto w-full max-w-4xl px-4 py-3 flex items-center justify-center">
<button class="hi-button text-2xl font-bold text-gray-900 px-6 py-2 rounded-lg cursor-default transition-all duration-300 hover:bg-gray-100">
Hi
</button>
</div>
</header>
<main class="w-full min-h-screen flex flex-col items-center p-4 sm:p-8">
<div id="content" class="markdown-body w-full max-w-4xl">
<!-- Markdown content will be rendered here -->
</div>
</main>
<script>
const markdownContent = `
# A corely symbolic language
**Hi** is a symbolic, JS-inspired language designed for AI and code golfing. It prioritizes symbols over keywords. The underscore `_` is the global output function.
```javascript
_("Hi world")