ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix: code blocks rendering + consistent styling with ciphera-website /learn

Browse Source 
- Convert MDX CodeBlock components to standard markdown code fences
- Add rehype-mdx-code-props to pass filename meta to code components
- Custom pre/code MDX components map fences to CodeBlock
- Add brand color badges (product + category) matching /learn layout
- Match prose styling: orange inline code, orange links, white strong
- Remove brand color background glow (not in /learn)
This commit is contained in:
Usman Baig
2026-03-29 01:01:56 +01:00
parent a992afe04b
commit 627613dc13
30 changed files with 235 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
content/integrations/react.mdx
View File

@@ -16,7 +16,8 @@ For standard React SPAs, add the script to your `index.html`.
The simplest approach is to add the Pulse script directly to your HTML entry point.
<CodeBlock filename="public/index.html">{`<!DOCTYPE html>
```html filename="public/index.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
@@ -33,13 +34,15 @@ The simplest approach is to add the Pulse script directly to your HTML entry poi
<body>
<div id="root"></div>
</body>
</html>`}</CodeBlock>
</html>
```
## Method 2: Programmatic injection via useEffect
If you prefer to inject the script programmatically (e.g. only in production), use a `useEffect` hook.
<CodeBlock filename="src/App.tsx">{`import { useEffect } from 'react'
```tsx filename="src/App.tsx"
import { useEffect } from 'react'
function App() {
useEffect(() => {
@@ -53,4 +56,5 @@ function App() {
}, [])
return <div className="App"><h1>Hello World</h1></div>
}`}</CodeBlock>
}
```