GauthierWebDev/memento-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add prismThemes to Fence component

Browse Source
This commit is contained in:
Gauthier Daniels 2025-04-11 18:30:24 +02:00
parent f76619709c
commit ede3dbbe7a
4 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/md/Tabs.tsx
View File

@ -54,7 +54,7 @@ export function Tabs({
> >
<div className="relative"> <div className="relative">
<div className="max-w-full overflow-x-auto overflow-y-hidden"> <div className="max-w-full overflow-x-auto overflow-y-hidden">
<ul className="!p-0 w-max flex items-stretch gap-2" aria-orientation="horizontal" role="tablist"> <ul className="!p-0 w-max flex items-stretch gap-1" aria-orientation="horizontal" role="tablist">
{tabs.map((tab) => ( {tabs.map((tab) => (
<li key={tab.value} className="overflow-hidden" role="tab" aria-selected={selectedTab === tab.value}> <li key={tab.value} className="overflow-hidden" role="tab" aria-selected={selectedTab === tab.value}>
<TabItem tab={tab} isSelected={selectedTab === tab.value} select={() => selectTab(tab.value)} /> <TabItem tab={tab} isSelected={selectedTab === tab.value} select={() => selectTab(tab.value)} />

12
app/components/syntax/Fence.tsx
View File

@ -1,9 +1,17 @@
import { prismThemes } from "@/data/themes/prism";
import { Highlight } from "prism-react-renderer"; import { Highlight } from "prism-react-renderer";
import { Fragment } from "react"; import { useTheme } from "@/hooks/useTheme";
import { Fragment, useMemo } from "react";
export function Fence({ children, language }: { children: string; language: string }) { export function Fence({ children, language }: { children: string; language: string }) {
const { theme } = useTheme();
const prismTheme = useMemo(() => {
return prismThemes[theme];
}, [theme]);
return ( return (
<Highlight code={children.trimEnd()} language={language} theme={{ plain: {}, styles: [] }}> <Highlight code={children.trimEnd()} language={language} theme={prismTheme}>
{({ className, style, tokens, getTokenProps }) => ( {({ className, style, tokens, getTokenProps }) => (
<pre className={className} style={style}> <pre className={className} style={style}>
<code> <code>

8
app/data/themes/prism.ts Normal file
View File

@ -0,0 +1,8 @@
import { PrismTheme } from "prism-react-renderer";
import { Theme } from "@/contexts/ThemeContext";
import { themes } from "prism-react-renderer";
export const prismThemes: Record<Theme, PrismTheme> = {
dark: themes.oneDark,
light: themes.oneLight,
};

2
app/lib/navigation.ts
View File

@ -8,6 +8,8 @@ export const navigation = [
{ title: "Premier composant", href: "/docs/react/premier-composant" }, { title: "Premier composant", href: "/docs/react/premier-composant" },
{ title: "State et cycle de vie", href: "/docs/react/state-et-cycle-de-vie" }, { title: "State et cycle de vie", href: "/docs/react/state-et-cycle-de-vie" },
{ title: "Hooks", href: "/docs/react/hooks" }, { title: "Hooks", href: "/docs/react/hooks" },
{ title: "Le hook useContext", href: "/docs/react/usecontext" },
{ title: "Le hook useReducer", href: "/docs/react/usereducer" },
], ],
}, },
{ {