presently 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/bin/presently +13 -0
- data/lib/presently/application.rb +104 -0
- data/lib/presently/clock.rb +77 -0
- data/lib/presently/display_view.rb +73 -0
- data/lib/presently/environment/application.rb +62 -0
- data/lib/presently/page.rb +38 -0
- data/lib/presently/page.xrb +31 -0
- data/lib/presently/presentation.rb +72 -0
- data/lib/presently/presentation_controller.rb +181 -0
- data/lib/presently/presenter_view.rb +264 -0
- data/lib/presently/slide.rb +148 -0
- data/lib/presently/slide_view.rb +92 -0
- data/lib/presently/state.rb +66 -0
- data/lib/presently/version.rb +9 -0
- data/lib/presently.rb +9 -0
- data/license.md +21 -0
- data/public/_components/@socketry/syntax/Syntax/CodeElement.js +337 -0
- data/public/_components/@socketry/syntax/Syntax/Errors.js +52 -0
- data/public/_components/@socketry/syntax/Syntax/Language/apache.js +49 -0
- data/public/_components/@socketry/syntax/Syntax/Language/applescript.js +157 -0
- data/public/_components/@socketry/syntax/Syntax/Language/assembly.js +42 -0
- data/public/_components/@socketry/syntax/Syntax/Language/bash-script.js +108 -0
- data/public/_components/@socketry/syntax/Syntax/Language/bash.js +32 -0
- data/public/_components/@socketry/syntax/Syntax/Language/basic.js +232 -0
- data/public/_components/@socketry/syntax/Syntax/Language/c++.js +1 -0
- data/public/_components/@socketry/syntax/Syntax/Language/c.js +1 -0
- data/public/_components/@socketry/syntax/Syntax/Language/clang.js +201 -0
- data/public/_components/@socketry/syntax/Syntax/Language/cpp.js +1 -0
- data/public/_components/@socketry/syntax/Syntax/Language/csharp.js +166 -0
- data/public/_components/@socketry/syntax/Syntax/Language/css.js +244 -0
- data/public/_components/@socketry/syntax/Syntax/Language/diff.js +24 -0
- data/public/_components/@socketry/syntax/Syntax/Language/go.js +135 -0
- data/public/_components/@socketry/syntax/Syntax/Language/haskell.js +110 -0
- data/public/_components/@socketry/syntax/Syntax/Language/html.js +69 -0
- data/public/_components/@socketry/syntax/Syntax/Language/io.js +68 -0
- data/public/_components/@socketry/syntax/Syntax/Language/java.js +134 -0
- data/public/_components/@socketry/syntax/Syntax/Language/javascript.js +89 -0
- data/public/_components/@socketry/syntax/Syntax/Language/json.js +36 -0
- data/public/_components/@socketry/syntax/Syntax/Language/lisp.js +38 -0
- data/public/_components/@socketry/syntax/Syntax/Language/lua.js +87 -0
- data/public/_components/@socketry/syntax/Syntax/Language/markdown.js +112 -0
- data/public/_components/@socketry/syntax/Syntax/Language/nginx.js +37 -0
- data/public/_components/@socketry/syntax/Syntax/Language/objective-c.js +1 -0
- data/public/_components/@socketry/syntax/Syntax/Language/ocaml.js +225 -0
- data/public/_components/@socketry/syntax/Syntax/Language/pascal.js +166 -0
- data/public/_components/@socketry/syntax/Syntax/Language/patch.js +2 -0
- data/public/_components/@socketry/syntax/Syntax/Language/perl5.js +317 -0
- data/public/_components/@socketry/syntax/Syntax/Language/php-script.js +112 -0
- data/public/_components/@socketry/syntax/Syntax/Language/php.js +18 -0
- data/public/_components/@socketry/syntax/Syntax/Language/plain.js +20 -0
- data/public/_components/@socketry/syntax/Syntax/Language/protobuf.js +77 -0
- data/public/_components/@socketry/syntax/Syntax/Language/python.js +208 -0
- data/public/_components/@socketry/syntax/Syntax/Language/ruby.js +124 -0
- data/public/_components/@socketry/syntax/Syntax/Language/scala.js +81 -0
- data/public/_components/@socketry/syntax/Syntax/Language/smalltalk.js +30 -0
- data/public/_components/@socketry/syntax/Syntax/Language/sql.js +865 -0
- data/public/_components/@socketry/syntax/Syntax/Language/super-collider.js +70 -0
- data/public/_components/@socketry/syntax/Syntax/Language/swift.js +176 -0
- data/public/_components/@socketry/syntax/Syntax/Language/xml.js +76 -0
- data/public/_components/@socketry/syntax/Syntax/Language/xrb.js +33 -0
- data/public/_components/@socketry/syntax/Syntax/Language/yaml.js +29 -0
- data/public/_components/@socketry/syntax/Syntax/Language.js +276 -0
- data/public/_components/@socketry/syntax/Syntax/Loader.js +78 -0
- data/public/_components/@socketry/syntax/Syntax/Match.js +546 -0
- data/public/_components/@socketry/syntax/Syntax/Rule.js +306 -0
- data/public/_components/@socketry/syntax/Syntax.js +356 -0
- data/public/_components/@socketry/syntax/bin/syntax-ast.js +42 -0
- data/public/_components/@socketry/syntax/examples/_template.html +53 -0
- data/public/_components/@socketry/syntax/examples/apache.html +72 -0
- data/public/_components/@socketry/syntax/examples/applescript.html +72 -0
- data/public/_components/@socketry/syntax/examples/assembly.html +74 -0
- data/public/_components/@socketry/syntax/examples/bash.html +90 -0
- data/public/_components/@socketry/syntax/examples/basic.html +87 -0
- data/public/_components/@socketry/syntax/examples/c.html +141 -0
- data/public/_components/@socketry/syntax/examples/clang.html +202 -0
- data/public/_components/@socketry/syntax/examples/csharp.html +110 -0
- data/public/_components/@socketry/syntax/examples/css-colors.html +179 -0
- data/public/_components/@socketry/syntax/examples/custom-theme.html +155 -0
- data/public/_components/@socketry/syntax/examples/diff.html +142 -0
- data/public/_components/@socketry/syntax/examples/examples.css +216 -0
- data/public/_components/@socketry/syntax/examples/go.html +413 -0
- data/public/_components/@socketry/syntax/examples/haskell.html +373 -0
- data/public/_components/@socketry/syntax/examples/html.html +316 -0
- data/public/_components/@socketry/syntax/examples/index.html +97 -0
- data/public/_components/@socketry/syntax/examples/io.html +552 -0
- data/public/_components/@socketry/syntax/examples/java.html +786 -0
- data/public/_components/@socketry/syntax/examples/javascript.html +199 -0
- data/public/_components/@socketry/syntax/examples/json.html +150 -0
- data/public/_components/@socketry/syntax/examples/lisp.html +476 -0
- data/public/_components/@socketry/syntax/examples/lua.html +737 -0
- data/public/_components/@socketry/syntax/examples/markdown.html +121 -0
- data/public/_components/@socketry/syntax/examples/mixed.html +306 -0
- data/public/_components/@socketry/syntax/examples/nginx.html +554 -0
- data/public/_components/@socketry/syntax/examples/ocaml.html +596 -0
- data/public/_components/@socketry/syntax/examples/pascal.html +762 -0
- data/public/_components/@socketry/syntax/examples/perl5.html +488 -0
- data/public/_components/@socketry/syntax/examples/php-script.html +142 -0
- data/public/_components/@socketry/syntax/examples/php.html +95 -0
- data/public/_components/@socketry/syntax/examples/plain.html +222 -0
- data/public/_components/@socketry/syntax/examples/protobuf.html +405 -0
- data/public/_components/@socketry/syntax/examples/python.html +82 -0
- data/public/_components/@socketry/syntax/examples/readme.md +79 -0
- data/public/_components/@socketry/syntax/examples/ruby.html +58 -0
- data/public/_components/@socketry/syntax/examples/scala.html +41 -0
- data/public/_components/@socketry/syntax/examples/smalltalk.html +436 -0
- data/public/_components/@socketry/syntax/examples/sql.html +373 -0
- data/public/_components/@socketry/syntax/examples/super-collider.html +55 -0
- data/public/_components/@socketry/syntax/examples/swift.html +176 -0
- data/public/_components/@socketry/syntax/examples/wrap-demo.html +103 -0
- data/public/_components/@socketry/syntax/examples/xml.html +112 -0
- data/public/_components/@socketry/syntax/examples/xrb.html +37 -0
- data/public/_components/@socketry/syntax/examples/yaml.html +72 -0
- data/public/_components/@socketry/syntax/license.md +21 -0
- data/public/_components/@socketry/syntax/package-lock.json +834 -0
- data/public/_components/@socketry/syntax/package.json +43 -0
- data/public/_components/@socketry/syntax/readme.md +162 -0
- data/public/_components/@socketry/syntax/test/Syntax/CodeElement.js +306 -0
- data/public/_components/@socketry/syntax/test/Syntax/ErrorHandling.js +85 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/apache.js +153 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/applescript.js +198 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/assembly.js +209 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/bash-script.js +225 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/bash.js +162 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/basic.js +265 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/clang.js +390 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/csharp.js +436 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/css.js +431 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/diff.js +206 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/go.js +386 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/haskell.js +454 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/html.js +111 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/io.js +229 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/java.js +362 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/javascript.js +101 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/json.js +101 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/lisp.js +224 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/lua.js +307 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/markdown.js +163 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/nginx.js +267 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/ocaml.js +299 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/pascal.js +311 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/perl5.js +333 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/php-script.js +197 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/php.js +92 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/plain.js +327 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/protobuf.js +294 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/python.js +213 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/ruby.js +70 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/scala.js +75 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/smalltalk.js +223 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/sql.js +281 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/super-collider.js +66 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/swift.js +71 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/xml.js +170 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/xrb.js +57 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language/yaml.js +123 -0
- data/public/_components/@socketry/syntax/test/Syntax/Language.js +62 -0
- data/public/_components/@socketry/syntax/test/Syntax/Match.js +40 -0
- data/public/_components/@socketry/syntax/test/Syntax/Rule.js +251 -0
- data/public/_components/@socketry/syntax/test/Syntax.js +38 -0
- data/public/_components/@socketry/syntax/test/helpers/ast-matcher.js +90 -0
- data/public/_components/@socketry/syntax/themes/base/apache.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/applescript.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/assembly.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/bash.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/basic.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/c.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/clang.css +0 -0
- data/public/_components/@socketry/syntax/themes/base/csharp.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/css.css +22 -0
- data/public/_components/@socketry/syntax/themes/base/diff.css +48 -0
- data/public/_components/@socketry/syntax/themes/base/go.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/haskell.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/html.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/io.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/java.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/javascript.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/json.css +41 -0
- data/public/_components/@socketry/syntax/themes/base/lisp.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/lua.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/markdown.css +16 -0
- data/public/_components/@socketry/syntax/themes/base/nginx.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/ocaml.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/pascal.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/perl5.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/php-script.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/php.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/plain.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/protobuf.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/python.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/ruby.css +23 -0
- data/public/_components/@socketry/syntax/themes/base/scala.css +3 -0
- data/public/_components/@socketry/syntax/themes/base/smalltalk.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/sql.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/super-collider.css +33 -0
- data/public/_components/@socketry/syntax/themes/base/swift.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/syntax.css +63 -0
- data/public/_components/@socketry/syntax/themes/base/xml.css +1 -0
- data/public/_components/@socketry/syntax/themes/base/xrb.css +29 -0
- data/public/_components/@socketry/syntax/themes/base/yaml.css +1 -0
- data/public/_components/@socketry/syntax/themes/theming.md +233 -0
- data/public/_components/@socketry/syntax/update-examples.js +135 -0
- data/public/_static/index.css +593 -0
- data/public/application.js +147 -0
- data/readme.md +69 -0
- data/releases.md +3 -0
- data/templates/code.xrb +12 -0
- data/templates/default.xrb +5 -0
- data/templates/image.xrb +8 -0
- data/templates/section.xrb +5 -0
- data/templates/title.xrb +8 -0
- data/templates/translation.xrb +8 -0
- data/templates/two_column.xrb +8 -0
- metadata +280 -0
|
@@ -0,0 +1,373 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>SQL Examples - @socketry/syntax</title>
|
|
7
|
+
<link rel="stylesheet" href="examples.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<header>
|
|
11
|
+
<h1>SQL Examples</h1>
|
|
12
|
+
<p class="subtitle">SQL syntax highlighting</p>
|
|
13
|
+
</header>
|
|
14
|
+
|
|
15
|
+
<nav>
|
|
16
|
+
<a href="index.html">Back to Examples</a>
|
|
17
|
+
</nav>
|
|
18
|
+
|
|
19
|
+
<h1>SQL Code Example</h1>
|
|
20
|
+
|
|
21
|
+
<div class="example">
|
|
22
|
+
<h2>Basic SELECT Query</h2>
|
|
23
|
+
<p class="description">Example:</p>
|
|
24
|
+
|
|
25
|
+
<pre><code class="language-sql">-- Retrieve all users
|
|
26
|
+
SELECT * FROM users;
|
|
27
|
+
|
|
28
|
+
-- Select specific columns
|
|
29
|
+
SELECT id, name, email FROM users WHERE active = 1;
|
|
30
|
+
</code></pre>
|
|
31
|
+
|
|
32
|
+
<div class="example">
|
|
33
|
+
<h2>INSERT Statement</h2>
|
|
34
|
+
<p class="description">Example:</p>
|
|
35
|
+
|
|
36
|
+
<pre><code class="language-sql">-- Insert a new user
|
|
37
|
+
INSERT INTO users (name, email, created_at)
|
|
38
|
+
VALUES ('John Doe', 'john@example.com', NOW());
|
|
39
|
+
|
|
40
|
+
-- Insert multiple rows
|
|
41
|
+
INSERT INTO products (name, price, stock)
|
|
42
|
+
VALUES
|
|
43
|
+
('Widget', 19.99, 100),
|
|
44
|
+
('Gadget', 29.99, 50),
|
|
45
|
+
('Doohickey', 9.99, 200);
|
|
46
|
+
</code></pre>
|
|
47
|
+
|
|
48
|
+
<div class="example">
|
|
49
|
+
<h2>UPDATE Statement</h2>
|
|
50
|
+
<p class="description">Example:</p>
|
|
51
|
+
|
|
52
|
+
<pre><code class="language-sql">-- Update a single user
|
|
53
|
+
UPDATE users
|
|
54
|
+
SET name = 'Jane Smith', updated_at = NOW()
|
|
55
|
+
WHERE id = 42;
|
|
56
|
+
|
|
57
|
+
-- Update with calculations
|
|
58
|
+
UPDATE products
|
|
59
|
+
SET price = price * 1.1
|
|
60
|
+
WHERE category = 'electronics';
|
|
61
|
+
</code></pre>
|
|
62
|
+
|
|
63
|
+
<div class="example">
|
|
64
|
+
<h2>DELETE Statement</h2>
|
|
65
|
+
<p class="description">Example:</p>
|
|
66
|
+
|
|
67
|
+
<pre><code class="language-sql">-- Delete a specific record
|
|
68
|
+
DELETE FROM users WHERE id = 999;
|
|
69
|
+
|
|
70
|
+
-- Delete with conditions
|
|
71
|
+
DELETE FROM logs
|
|
72
|
+
WHERE created_at < DATE_SUB(NOW(), INTERVAL 30 DAY);
|
|
73
|
+
</code></pre>
|
|
74
|
+
|
|
75
|
+
<div class="example">
|
|
76
|
+
<h2>CREATE TABLE</h2>
|
|
77
|
+
<p class="description">Example:</p>
|
|
78
|
+
|
|
79
|
+
<pre><code class="language-sql">-- Create a new table
|
|
80
|
+
CREATE TABLE users (
|
|
81
|
+
id INT AUTO_INCREMENT PRIMARY KEY,
|
|
82
|
+
name VARCHAR(100) NOT NULL,
|
|
83
|
+
email VARCHAR(255) UNIQUE NOT NULL,
|
|
84
|
+
password_hash CHAR(64) NOT NULL,
|
|
85
|
+
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
|
86
|
+
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
|
|
87
|
+
INDEX idx_email (email),
|
|
88
|
+
INDEX idx_created (created_at)
|
|
89
|
+
);
|
|
90
|
+
|
|
91
|
+
-- Create table with foreign keys
|
|
92
|
+
CREATE TABLE orders (
|
|
93
|
+
id INT AUTO_INCREMENT PRIMARY KEY,
|
|
94
|
+
user_id INT NOT NULL,
|
|
95
|
+
total DECIMAL(10, 2) NOT NULL,
|
|
96
|
+
status ENUM('pending', 'processing', 'completed', 'cancelled') DEFAULT 'pending',
|
|
97
|
+
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
|
98
|
+
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
|
|
99
|
+
);
|
|
100
|
+
</code></pre>
|
|
101
|
+
|
|
102
|
+
<div class="example">
|
|
103
|
+
<h2>ALTER TABLE</h2>
|
|
104
|
+
<p class="description">Example:</p>
|
|
105
|
+
|
|
106
|
+
<pre><code class="language-sql">-- Add a new column
|
|
107
|
+
ALTER TABLE users ADD COLUMN phone VARCHAR(20);
|
|
108
|
+
|
|
109
|
+
-- Modify a column
|
|
110
|
+
ALTER TABLE users MODIFY COLUMN name VARCHAR(200) NOT NULL;
|
|
111
|
+
|
|
112
|
+
-- Drop a column
|
|
113
|
+
ALTER TABLE users DROP COLUMN temporary_field;
|
|
114
|
+
|
|
115
|
+
-- Add an index
|
|
116
|
+
ALTER TABLE users ADD INDEX idx_phone (phone);
|
|
117
|
+
</code></pre>
|
|
118
|
+
|
|
119
|
+
<div class="example">
|
|
120
|
+
<h2>JOIN Operations</h2>
|
|
121
|
+
<p class="description">Example:</p>
|
|
122
|
+
|
|
123
|
+
<pre><code class="language-sql">-- INNER JOIN
|
|
124
|
+
SELECT u.name, o.total, o.created_at
|
|
125
|
+
FROM users u
|
|
126
|
+
INNER JOIN orders o ON u.id = o.user_id
|
|
127
|
+
WHERE o.status = 'completed';
|
|
128
|
+
|
|
129
|
+
-- LEFT JOIN
|
|
130
|
+
SELECT u.id, u.name, COUNT(o.id) AS order_count
|
|
131
|
+
FROM users u
|
|
132
|
+
LEFT JOIN orders o ON u.id = o.user_id
|
|
133
|
+
GROUP BY u.id, u.name;
|
|
134
|
+
|
|
135
|
+
-- Multiple JOINs
|
|
136
|
+
SELECT
|
|
137
|
+
u.name AS customer_name,
|
|
138
|
+
o.id AS order_id,
|
|
139
|
+
p.name AS product_name,
|
|
140
|
+
oi.quantity,
|
|
141
|
+
oi.price
|
|
142
|
+
FROM users u
|
|
143
|
+
INNER JOIN orders o ON u.id = o.user_id
|
|
144
|
+
INNER JOIN order_items oi ON o.id = oi.order_id
|
|
145
|
+
INNER JOIN products p ON oi.product_id = p.id
|
|
146
|
+
WHERE o.status = 'completed'
|
|
147
|
+
ORDER BY o.created_at DESC;
|
|
148
|
+
</code></pre>
|
|
149
|
+
|
|
150
|
+
<div class="example">
|
|
151
|
+
<h2>Aggregate Functions</h2>
|
|
152
|
+
<p class="description">Example:</p>
|
|
153
|
+
|
|
154
|
+
<pre><code class="language-sql">-- COUNT, SUM, AVG
|
|
155
|
+
SELECT
|
|
156
|
+
COUNT(*) AS total_orders,
|
|
157
|
+
SUM(total) AS total_revenue,
|
|
158
|
+
AVG(total) AS average_order_value,
|
|
159
|
+
MIN(total) AS smallest_order,
|
|
160
|
+
MAX(total) AS largest_order
|
|
161
|
+
FROM orders
|
|
162
|
+
WHERE status = 'completed';
|
|
163
|
+
|
|
164
|
+
-- GROUP BY with HAVING
|
|
165
|
+
SELECT
|
|
166
|
+
category,
|
|
167
|
+
COUNT(*) AS product_count,
|
|
168
|
+
AVG(price) AS avg_price
|
|
169
|
+
FROM products
|
|
170
|
+
GROUP BY category
|
|
171
|
+
HAVING COUNT(*) > 5
|
|
172
|
+
ORDER BY avg_price DESC;
|
|
173
|
+
</code></pre>
|
|
174
|
+
|
|
175
|
+
<div class="example">
|
|
176
|
+
<h2>Subqueries</h2>
|
|
177
|
+
<p class="description">Example:</p>
|
|
178
|
+
|
|
179
|
+
<pre><code class="language-sql">-- Subquery in WHERE clause
|
|
180
|
+
SELECT name, email
|
|
181
|
+
FROM users
|
|
182
|
+
WHERE id IN (
|
|
183
|
+
SELECT DISTINCT user_id
|
|
184
|
+
FROM orders
|
|
185
|
+
WHERE total > 1000
|
|
186
|
+
);
|
|
187
|
+
|
|
188
|
+
-- Subquery in FROM clause
|
|
189
|
+
SELECT
|
|
190
|
+
category,
|
|
191
|
+
avg_price,
|
|
192
|
+
product_count
|
|
193
|
+
FROM (
|
|
194
|
+
SELECT
|
|
195
|
+
category,
|
|
196
|
+
AVG(price) AS avg_price,
|
|
197
|
+
COUNT(*) AS product_count
|
|
198
|
+
FROM products
|
|
199
|
+
GROUP BY category
|
|
200
|
+
) AS category_stats
|
|
201
|
+
WHERE product_count > 10;
|
|
202
|
+
|
|
203
|
+
-- Correlated subquery
|
|
204
|
+
SELECT u.name, u.email
|
|
205
|
+
FROM users u
|
|
206
|
+
WHERE EXISTS (
|
|
207
|
+
SELECT 1
|
|
208
|
+
FROM orders o
|
|
209
|
+
WHERE o.user_id = u.id AND o.total > 500
|
|
210
|
+
);
|
|
211
|
+
</code></pre>
|
|
212
|
+
|
|
213
|
+
<div class="example">
|
|
214
|
+
<h2>Window Functions</h2>
|
|
215
|
+
<p class="description">Example:</p>
|
|
216
|
+
|
|
217
|
+
<pre><code class="language-sql">-- ROW_NUMBER
|
|
218
|
+
SELECT
|
|
219
|
+
name,
|
|
220
|
+
category,
|
|
221
|
+
price,
|
|
222
|
+
ROW_NUMBER() OVER (PARTITION BY category ORDER BY price DESC) AS price_rank
|
|
223
|
+
FROM products;
|
|
224
|
+
|
|
225
|
+
-- Running totals
|
|
226
|
+
SELECT
|
|
227
|
+
date,
|
|
228
|
+
amount,
|
|
229
|
+
SUM(amount) OVER (ORDER BY date) AS running_total
|
|
230
|
+
FROM transactions;
|
|
231
|
+
|
|
232
|
+
-- LAG and LEAD
|
|
233
|
+
SELECT
|
|
234
|
+
date,
|
|
235
|
+
revenue,
|
|
236
|
+
LAG(revenue) OVER (ORDER BY date) AS previous_day,
|
|
237
|
+
LEAD(revenue) OVER (ORDER BY date) AS next_day,
|
|
238
|
+
revenue - LAG(revenue) OVER (ORDER BY date) AS day_over_day_change
|
|
239
|
+
FROM daily_revenue;
|
|
240
|
+
</code></pre>
|
|
241
|
+
|
|
242
|
+
<div class="example">
|
|
243
|
+
<h2>Common Table Expressions (CTE)</h2>
|
|
244
|
+
<p class="description">Example:</p>
|
|
245
|
+
|
|
246
|
+
<pre><code class="language-sql">-- Simple CTE
|
|
247
|
+
WITH active_users AS (
|
|
248
|
+
SELECT id, name, email
|
|
249
|
+
FROM users
|
|
250
|
+
WHERE active = 1
|
|
251
|
+
)
|
|
252
|
+
SELECT
|
|
253
|
+
au.name,
|
|
254
|
+
COUNT(o.id) AS order_count
|
|
255
|
+
FROM active_users au
|
|
256
|
+
LEFT JOIN orders o ON au.id = o.user_id
|
|
257
|
+
GROUP BY au.id, au.name;
|
|
258
|
+
|
|
259
|
+
-- Recursive CTE
|
|
260
|
+
WITH RECURSIVE category_tree AS (
|
|
261
|
+
SELECT id, name, parent_id, 1 AS level
|
|
262
|
+
FROM categories
|
|
263
|
+
WHERE parent_id IS NULL
|
|
264
|
+
|
|
265
|
+
UNION ALL
|
|
266
|
+
|
|
267
|
+
SELECT c.id, c.name, c.parent_id, ct.level + 1
|
|
268
|
+
FROM categories c
|
|
269
|
+
INNER JOIN category_tree ct ON c.parent_id = ct.id
|
|
270
|
+
)
|
|
271
|
+
SELECT * FROM category_tree ORDER BY level, name;
|
|
272
|
+
</code></pre>
|
|
273
|
+
|
|
274
|
+
<div class="example">
|
|
275
|
+
<h2>CASE Expressions</h2>
|
|
276
|
+
<p class="description">Example:</p>
|
|
277
|
+
|
|
278
|
+
<pre><code class="language-sql">-- Simple CASE
|
|
279
|
+
SELECT
|
|
280
|
+
name,
|
|
281
|
+
price,
|
|
282
|
+
CASE
|
|
283
|
+
WHEN price < 10 THEN 'Budget'
|
|
284
|
+
WHEN price < 50 THEN 'Standard'
|
|
285
|
+
WHEN price < 100 THEN 'Premium'
|
|
286
|
+
ELSE 'Luxury'
|
|
287
|
+
END AS price_category
|
|
288
|
+
FROM products;
|
|
289
|
+
|
|
290
|
+
-- CASE with aggregation
|
|
291
|
+
SELECT
|
|
292
|
+
category,
|
|
293
|
+
COUNT(*) AS total_products,
|
|
294
|
+
SUM(CASE WHEN price < 20 THEN 1 ELSE 0 END) AS budget_count,
|
|
295
|
+
SUM(CASE WHEN price >= 20 AND price < 100 THEN 1 ELSE 0 END) AS mid_range_count,
|
|
296
|
+
SUM(CASE WHEN price >= 100 THEN 1 ELSE 0 END) AS premium_count
|
|
297
|
+
FROM products
|
|
298
|
+
GROUP BY category;
|
|
299
|
+
</code></pre>
|
|
300
|
+
|
|
301
|
+
<div class="example">
|
|
302
|
+
<h2>Transactions</h2>
|
|
303
|
+
<p class="description">Example:</p>
|
|
304
|
+
|
|
305
|
+
<pre><code class="language-sql">-- Basic transaction
|
|
306
|
+
START TRANSACTION;
|
|
307
|
+
|
|
308
|
+
UPDATE accounts SET balance = balance - 100 WHERE id = 1;
|
|
309
|
+
UPDATE accounts SET balance = balance + 100 WHERE id = 2;
|
|
310
|
+
|
|
311
|
+
COMMIT;
|
|
312
|
+
|
|
313
|
+
-- Transaction with rollback on error
|
|
314
|
+
BEGIN;
|
|
315
|
+
|
|
316
|
+
INSERT INTO orders (user_id, total) VALUES (42, 99.99);
|
|
317
|
+
SET @order_id = LAST_INSERT_ID();
|
|
318
|
+
|
|
319
|
+
INSERT INTO order_items (order_id, product_id, quantity, price)
|
|
320
|
+
VALUES (@order_id, 1, 2, 19.99);
|
|
321
|
+
|
|
322
|
+
-- If error occurs, rollback
|
|
323
|
+
-- ROLLBACK;
|
|
324
|
+
|
|
325
|
+
COMMIT;
|
|
326
|
+
</code></pre>
|
|
327
|
+
|
|
328
|
+
<div class="example">
|
|
329
|
+
<h2>Indexes and Performance</h2>
|
|
330
|
+
<p class="description">Example:</p>
|
|
331
|
+
|
|
332
|
+
<pre><code class="language-sql">-- Create indexes
|
|
333
|
+
CREATE INDEX idx_user_email ON users(email);
|
|
334
|
+
CREATE INDEX idx_order_status ON orders(status, created_at);
|
|
335
|
+
CREATE UNIQUE INDEX idx_username ON users(username);
|
|
336
|
+
|
|
337
|
+
-- Full-text index
|
|
338
|
+
CREATE FULLTEXT INDEX idx_product_description ON products(name, description);
|
|
339
|
+
|
|
340
|
+
-- Full-text search
|
|
341
|
+
SELECT * FROM products
|
|
342
|
+
WHERE MATCH(name, description) AGAINST ('widget gadget' IN BOOLEAN MODE);
|
|
343
|
+
|
|
344
|
+
-- Analyze query performance
|
|
345
|
+
EXPLAIN SELECT * FROM orders WHERE user_id = 42 AND status = 'completed';
|
|
346
|
+
</code></pre>
|
|
347
|
+
|
|
348
|
+
<div class="example">
|
|
349
|
+
<h2>Views</h2>
|
|
350
|
+
<p class="description">Example:</p>
|
|
351
|
+
|
|
352
|
+
<pre><code class="language-sql">-- Create a view
|
|
353
|
+
CREATE VIEW active_customers AS
|
|
354
|
+
SELECT
|
|
355
|
+
u.id,
|
|
356
|
+
u.name,
|
|
357
|
+
u.email,
|
|
358
|
+
COUNT(o.id) AS order_count,
|
|
359
|
+
SUM(o.total) AS total_spent
|
|
360
|
+
FROM users u
|
|
361
|
+
LEFT JOIN orders o ON u.id = o.user_id
|
|
362
|
+
WHERE u.active = 1
|
|
363
|
+
GROUP BY u.id, u.name, u.email;
|
|
364
|
+
|
|
365
|
+
-- Use the view
|
|
366
|
+
SELECT * FROM active_customers WHERE total_spent > 1000;
|
|
367
|
+
|
|
368
|
+
-- Drop a view
|
|
369
|
+
DROP VIEW IF EXISTS active_customers;
|
|
370
|
+
</code></pre>
|
|
371
|
+
|
|
372
|
+
</body>
|
|
373
|
+
</html>
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>SuperCollider Examples - @socketry/syntax</title>
|
|
7
|
+
<link rel="stylesheet" href="examples.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<header>
|
|
11
|
+
<h1>SuperCollider Examples</h1>
|
|
12
|
+
<p class="subtitle">SuperCollider syntax highlighting</p>
|
|
13
|
+
</header>
|
|
14
|
+
|
|
15
|
+
<nav>
|
|
16
|
+
<a href="index.html">Back to Examples</a>
|
|
17
|
+
</nav>
|
|
18
|
+
|
|
19
|
+
<h1>SuperCollider Syntax Highlighting</h1>
|
|
20
|
+
|
|
21
|
+
<syntax-code language="super-collider">
|
|
22
|
+
// Basic SynthDef example
|
|
23
|
+
SynthDef(\example, { |freq = 440, amp = 0.1|
|
|
24
|
+
var sig;
|
|
25
|
+
sig = SinOsc.ar(freq) * amp;
|
|
26
|
+
Out.ar(0, Pan2.ar(sig));
|
|
27
|
+
}).add;
|
|
28
|
+
|
|
29
|
+
// Using symbols and method calls
|
|
30
|
+
~buf = Buffer.read(s, Platform.resourceDir +/+ "sounds/a11wlk01.wav");
|
|
31
|
+
~player = { |rate = 1|
|
|
32
|
+
var play;
|
|
33
|
+
play = PlayBuf.ar(1, ~buf, rate, loop: 1);
|
|
34
|
+
Out.ar(0, Pan2.ar(play));
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
// Comments and strings
|
|
38
|
+
// This is a line comment
|
|
39
|
+
/* This is a block comment */
|
|
40
|
+
"Double quoted string"; 'Single quoted string';
|
|
41
|
+
|
|
42
|
+
// Numbers and operations
|
|
43
|
+
var x = 123.45; var y = 0xFF; x = x + y * 2;
|
|
44
|
+
|
|
45
|
+
// Method chains
|
|
46
|
+
x.squared.clip(0, 1);
|
|
47
|
+
</syntax-code>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<script type="module">
|
|
51
|
+
import Syntax from '../Syntax.js';
|
|
52
|
+
await Syntax.highlight({ autoUpgrade: true });
|
|
53
|
+
</script>
|
|
54
|
+
</body>
|
|
55
|
+
</html>
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Swift Examples - @socketry/syntax</title>
|
|
7
|
+
<link rel="stylesheet" href="examples.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<header>
|
|
11
|
+
<h1>Swift Examples</h1>
|
|
12
|
+
<p class="subtitle">Swift syntax highlighting</p>
|
|
13
|
+
</header>
|
|
14
|
+
|
|
15
|
+
<nav>
|
|
16
|
+
<a href="index.html">Back to Examples</a>
|
|
17
|
+
</nav>
|
|
18
|
+
|
|
19
|
+
<h1>Swift Code Example</h1>
|
|
20
|
+
|
|
21
|
+
<syntax-code language="swift">
|
|
22
|
+
// Swift - Apple's powerful and intuitive programming language
|
|
23
|
+
|
|
24
|
+
// MARK: - Basic Swift Features
|
|
25
|
+
|
|
26
|
+
// Variables and Constants
|
|
27
|
+
let name = "Swift"
|
|
28
|
+
var version = 5.9
|
|
29
|
+
let isAwesome = true
|
|
30
|
+
|
|
31
|
+
// Optional values
|
|
32
|
+
var optionalValue: String? = nil
|
|
33
|
+
let unwrappedValue = optionalValue ?? "default"
|
|
34
|
+
|
|
35
|
+
// MARK: - Functions and Closures
|
|
36
|
+
|
|
37
|
+
// Function with parameters and return type
|
|
38
|
+
func greet(name: String) -> String {
|
|
39
|
+
return "Hello, \(name)!"
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// Function with multiple return values
|
|
43
|
+
func minMax(array: [Int]) -> (min: Int, max: Int)? {
|
|
44
|
+
guard let first = array.first else { return nil }
|
|
45
|
+
var currentMin = first
|
|
46
|
+
var currentMax = first
|
|
47
|
+
|
|
48
|
+
for value in array {
|
|
49
|
+
if value < currentMin {
|
|
50
|
+
currentMin = value
|
|
51
|
+
} else if value > currentMax {
|
|
52
|
+
currentMax = value
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
return (currentMin, currentMax)
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// Closure example
|
|
60
|
+
let numbers = [1, 2, 3, 4, 5]
|
|
61
|
+
let squared = numbers.map { $0 * $0 }
|
|
62
|
+
|
|
63
|
+
// MARK: - Classes and Structures
|
|
64
|
+
|
|
65
|
+
// Protocol definition
|
|
66
|
+
protocol Drawable {
|
|
67
|
+
func draw()
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
// Class with inheritance
|
|
71
|
+
class Shape: Drawable {
|
|
72
|
+
var name: String
|
|
73
|
+
|
|
74
|
+
init(name: String) {
|
|
75
|
+
self.name = name
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
func draw() {
|
|
79
|
+
print("Drawing \(name)")
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// Struct (value type)
|
|
84
|
+
struct Point {
|
|
85
|
+
var x: Double
|
|
86
|
+
var y: Double
|
|
87
|
+
|
|
88
|
+
mutating func moveBy(x deltaX: Double, y deltaY: Double) {
|
|
89
|
+
x += deltaX
|
|
90
|
+
y += deltaY
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// MARK: - Enumerations
|
|
95
|
+
|
|
96
|
+
enum CompassPoint {
|
|
97
|
+
case north, south, east, west
|
|
98
|
+
|
|
99
|
+
var description: String {
|
|
100
|
+
switch self {
|
|
101
|
+
case .north: return "North"
|
|
102
|
+
case .south: return "South"
|
|
103
|
+
case .east: return "East"
|
|
104
|
+
case .west: return "West"
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// Enum with associated values
|
|
110
|
+
enum Result<T, E: Error> {
|
|
111
|
+
case success(T)
|
|
112
|
+
case failure(E)
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
// MARK: - Access Control
|
|
116
|
+
|
|
117
|
+
public class PublicClass {
|
|
118
|
+
public var publicProperty = "visible everywhere"
|
|
119
|
+
private var privateProperty = "only in this class"
|
|
120
|
+
fileprivate var fileprivateProperty = "only in this file"
|
|
121
|
+
|
|
122
|
+
public init() {}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// MARK: - Property Wrappers
|
|
126
|
+
|
|
127
|
+
@propertyWrapper
|
|
128
|
+
struct Capitalized {
|
|
129
|
+
private var value: String = ""
|
|
130
|
+
|
|
131
|
+
var wrappedValue: String {
|
|
132
|
+
get { value }
|
|
133
|
+
set { value = newValue.capitalized }
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
struct User {
|
|
138
|
+
@Capitalized var name: String
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
// MARK: - Async/Await
|
|
142
|
+
|
|
143
|
+
func fetchData() async throws -> String {
|
|
144
|
+
// Simulate async operation
|
|
145
|
+
try await Task.sleep(nanoseconds: 1_000_000_000)
|
|
146
|
+
return "Data fetched"
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
// MARK: - Generics
|
|
150
|
+
|
|
151
|
+
func swap<T>(_ a: inout T, _ b: inout T) {
|
|
152
|
+
let temp = a
|
|
153
|
+
a = b
|
|
154
|
+
b = temp
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
// MARK: - Compiler Directives
|
|
158
|
+
|
|
159
|
+
#if DEBUG
|
|
160
|
+
print("Debug mode")
|
|
161
|
+
#else
|
|
162
|
+
print("Release mode")
|
|
163
|
+
#endif
|
|
164
|
+
|
|
165
|
+
#available(iOS 15.0, *)
|
|
166
|
+
func modernFeature() {
|
|
167
|
+
// Use iOS 15+ features
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
// MARK: - Escaping Keywords
|
|
171
|
+
|
|
172
|
+
let `class` = "This is a keyword used as identifier"
|
|
173
|
+
let `protocol` = "Another keyword"
|
|
174
|
+
</syntax-code>
|
|
175
|
+
</body>
|
|
176
|
+
</html>
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Wrap Demo Examples - @socketry/syntax</title>
|
|
7
|
+
<link rel="stylesheet" href="examples.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<header>
|
|
11
|
+
<h1>Wrap Demo Examples</h1>
|
|
12
|
+
<p class="subtitle">Wrap Demo syntax highlighting</p>
|
|
13
|
+
</header>
|
|
14
|
+
|
|
15
|
+
<nav>
|
|
16
|
+
<a href="index.html">Back to Examples</a>
|
|
17
|
+
</nav>
|
|
18
|
+
|
|
19
|
+
<h1>Wrap Attribute Demo</h1>
|
|
20
|
+
|
|
21
|
+
<div class="note">
|
|
22
|
+
<strong>Note:</strong> The <code>wrap</code> attribute is automatically detected:
|
|
23
|
+
<ul>
|
|
24
|
+
<li><code><pre><syntax-code></code> → <code>wrap="true"</code> (flex layout for line wrapping)</li>
|
|
25
|
+
<li><code><syntax-code></code> alone → no wrap (horizontal scrolling)</li>
|
|
26
|
+
</ul>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<div class="example">
|
|
30
|
+
<h2>Block Code (inside <pre>) - with wrap</h2>
|
|
31
|
+
<p class="description">
|
|
32
|
+
This code is inside a <code><pre></code> tag. The <code>wrap</code> attribute
|
|
33
|
+
will be automatically set, enabling flex layout for proper line wrapping.
|
|
34
|
+
</p>
|
|
35
|
+
|
|
36
|
+
<pre><code class="language-javascript">
|
|
37
|
+
// This is a really long line of code that demonstrates how the wrap attribute enables line wrapping with proper indentation preservation
|
|
38
|
+
function processUserData(userId, options = { verbose: true, timeout: 5000, retries: 3 }) {
|
|
39
|
+
const result = await fetchData(`/api/users/${userId}`, { method: 'GET', headers: { 'Authorization': `Bearer ${token}` } });
|
|
40
|
+
return result;
|
|
41
|
+
}
|
|
42
|
+
</code></pre>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<div class="example">
|
|
46
|
+
<h2>Inline Code - without wrap (scrolling)</h2>
|
|
47
|
+
<p class="description">
|
|
48
|
+
When used inline, like <syntax-code language="javascript">const x = 1; const y = 2; const z = 3;</syntax-code>,
|
|
49
|
+
the element doesn't have <code>wrap</code> set, so it will scroll horizontally if needed.
|
|
50
|
+
</p>
|
|
51
|
+
|
|
52
|
+
<p>
|
|
53
|
+
Here's a longer inline example:
|
|
54
|
+
<syntax-code language="javascript">const reallyLongVariableName = await fetchSomethingFromTheServer({ timeout: 5000, retries: 3 });</syntax-code>
|
|
55
|
+
and it continues in the paragraph.
|
|
56
|
+
</p>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<div class="example">
|
|
60
|
+
<h2>Manual wrap Attribute</h2>
|
|
61
|
+
<p class="description">
|
|
62
|
+
You can also manually set the <code>wrap</code> attribute:
|
|
63
|
+
</p>
|
|
64
|
+
|
|
65
|
+
<syntax-code language="python" wrap>
|
|
66
|
+
# This has wrap="true" manually set
|
|
67
|
+
def process_data(items):
|
|
68
|
+
return [transform_item(item, options={'verbose': True, 'deep': True}) for item in items if item.is_valid()]
|
|
69
|
+
</syntax-code>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<div class="example">
|
|
73
|
+
<h2>Block Code without wrap (scrolling)</h2>
|
|
74
|
+
<p class="description">
|
|
75
|
+
You can disable wrapping even in a block by setting <code>wrap="false"</code>:
|
|
76
|
+
</p>
|
|
77
|
+
|
|
78
|
+
<pre><syntax-code language="javascript">
|
|
79
|
+
// This will scroll horizontally instead of wrapping
|
|
80
|
+
const configuration = { api: 'https://api.example.com', timeout: 5000, retries: 3, headers: { 'Authorization': 'Bearer token123' } };
|
|
81
|
+
</syntax-code></pre>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<script type="module">
|
|
85
|
+
import Syntax from '../Syntax.js';
|
|
86
|
+
|
|
87
|
+
// Auto-upgrade existing code blocks to syntax-code elements
|
|
88
|
+
await Syntax.highlight({
|
|
89
|
+
upgradeAll: true,
|
|
90
|
+
selector: 'code[class*="language-"]'
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
// Log which elements have wrap attribute
|
|
94
|
+
setTimeout(() => {
|
|
95
|
+
const allSyntaxCode = document.querySelectorAll('syntax-code');
|
|
96
|
+
console.log('Syntax code elements:');
|
|
97
|
+
allSyntaxCode.forEach((el, i) => {
|
|
98
|
+
console.log(` [${i}] wrap=${el.hasAttribute('wrap')}, parent=${el.parentElement?.tagName}`);
|
|
99
|
+
});
|
|
100
|
+
}, 500);
|
|
101
|
+
</script>
|
|
102
|
+
</body>
|
|
103
|
+
</html>
|