jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: fix prismjs loading

Browse source
This commit is contained in:
nick-delirium 2024-12-16 10:39:38 +01:00
parent 69ef083abe
commit 92a6379e2c
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
3 changed files with 23 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/app/assets/index.html
View file

@ -14,6 +14,15 @@
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet" />
<link rel="preload" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css"></noscript>
<script defer src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-javascript.min.js"></script>
<script defer>
Prism.plugins.autoloader.languages_path = 'https://cdn.jsdelivr.net/npm/prismjs/components/';
</script>
</head> </head>
<body> <body>
<div id="modal-root"></div> <div id="modal-root"></div>

28
frontend/app/components/ui/CodeBlock/CodeBlock.tsx
View file

@ -1,20 +1,20 @@
import React, { useEffect } from "react"; import React, { useEffect } from 'react';
import Prism from "prismjs";
interface IProps { export default function CodeBlock({ code }) {
code: string; const language = 'javascript'
language: string;
}
const CodeBlock = ({ code, language }: IProps) => {
useEffect(() => { useEffect(() => {
Prism.highlightAll(false); setTimeout(() => {
}, []); if (window.Prism) {
Prism.highlightAll();
}
}, 0)
}, [code, language]);
return ( return (
<pre> <pre>
<code children={code} className={`language-${language}`} /> <code className={`language-${language}`}>
{code}
</code>
</pre> </pre>
); );
}; }
export default CodeBlock;

16
frontend/babel.config.js
View file

@ -7,21 +7,5 @@ module.exports = {
plugins: [ plugins: [
'babel-plugin-react-require', 'babel-plugin-react-require',
['@babel/plugin-proposal-decorators', { legacy: true }], ['@babel/plugin-proposal-decorators', { legacy: true }],
[
'prismjs',
{
languages: [
'javascript',
'css',
'bash',
'typescript',
'jsx',
'kotlin',
'swift',
],
theme: 'default',
css: true,
},
],
], ],
}; };