Skip to content

Commit 1827fbe

Browse files
gHashTagclaude
andcommitted
feat: Add live code blocks to documentation
- Install @docusaurus/theme-live-codeblock - Code blocks with ```jsx live``` are now interactive - Users can edit code and see results instantly - Trinity Identity page has live verification example Usage: Add 'live' after language in code fence: ```jsx live function Demo() { return <div>Hello</div> } ``` 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent ac4f3fb commit 1827fbe

4 files changed

Lines changed: 417 additions & 25 deletions

File tree

docsite/docs/concepts/trinity-identity.md

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -95,31 +95,30 @@ These approximations are empirical curve fits, not derivations from first princi
9595

9696
## Interactive Verification
9797

98-
import MathVerify from '@site/src/components/MathVerify';
99-
100-
Try it yourself — run the code below to verify the Trinity Identity:
101-
102-
<MathVerify
103-
formula="φ² + 1/φ² = 3"
104-
pythonCode={`import math
105-
106-
# Calculate the golden ratio
107-
phi = (1 + math.sqrt(5)) / 2
108-
109-
# Compute each term
110-
phi_squared = phi ** 2
111-
inv_phi_squared = 1 / (phi ** 2)
112-
result = phi_squared + inv_phi_squared
113-
114-
# Display results
115-
print(f"φ = {phi:.15f}")
116-
print(f"φ² = {phi_squared:.15f}")
117-
print(f"1/φ² = {inv_phi_squared:.15f}")
118-
print(f"")
119-
print(f"φ² + 1/φ² = {result:.15f}")
120-
print(f"")
121-
print(f"✓ Equals 3: {abs(result - 3) < 1e-10}")`}
122-
/>
98+
Try it yourself — edit the code and see the result live:
99+
100+
```jsx live
101+
function TrinityIdentity() {
102+
const phi = (1 + Math.sqrt(5)) / 2;
103+
const phiSquared = phi * phi;
104+
const invPhiSquared = 1 / (phi * phi);
105+
const result = phiSquared + invPhiSquared;
106+
107+
return (
108+
<div style={{fontFamily: 'monospace', padding: '1rem'}}>
109+
<div>φ = {phi.toFixed(15)}</div>
110+
<div>φ² = {phiSquared.toFixed(15)}</div>
111+
<div>1/φ² = {invPhiSquared.toFixed(15)}</div>
112+
<div style={{marginTop: '0.5rem', fontWeight: 'bold'}}>
113+
φ² + 1/φ² = {result.toFixed(15)}
114+
</div>
115+
<div style={{marginTop: '0.5rem', color: '#16a34a'}}>
116+
✓ Equals 3: {Math.abs(result - 3) < 1e-10 ? 'TRUE' : 'FALSE'}
117+
</div>
118+
</div>
119+
);
120+
}
121+
```
123122

124123
## Computational Verification (Zig)
125124

docsite/docusaurus.config.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ const config: Config = {
3939
},
4040
],
4141

42+
themes: ['@docusaurus/theme-live-codeblock'],
43+
4244
presets: [
4345
[
4446
'classic',
@@ -116,6 +118,9 @@ const config: Config = {
116118
darkTheme: prismThemes.dracula,
117119
additionalLanguages: ['bash', 'yaml', 'json'],
118120
},
121+
liveCodeBlock: {
122+
playgroundPosition: 'bottom',
123+
},
119124
} satisfies Preset.ThemeConfig,
120125
};
121126

0 commit comments

Comments
 (0)