You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
And my Element,js file code- import React from 'react'; import 'prismjs/themes/prism.css' const Element = ({ attributes, children, element }) => { switch (element.type) { case 'code-line': return <div {...attributes}>{children}</div>; case 'code-block': return ( <pre {...attributes}> <code className="language-javascript">{children}</code> </pre> ); default: return <div {...attributes}>{children}</div>; } }; export default Element;
Please help me out i have searched whole internet and i am not getting why its happening whenever i remove the class from Element.js it works fine but it then it doesn't show highlighting so please help me out.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Before clicking-
After clicking-
My Code-
`import React, { useEffect, useMemo, useState,useCallback } from 'react'
import { createEditor,Transforms,Editor,Text } from 'slate'
import { Slate, Editable ,withReact} from 'slate-react'
import {initialValue} from './SlateInitialValue';
import { withHistory } from 'slate-history'
import Prism from 'prismjs';
import Element from "./Element";
import 'prismjs/plugins/keep-markup/prism-keep-markup.js';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
function Input() {
const editor = useMemo(() => withHistory(withReact(createEditor())), [])
const [value, setValue] = useState(initialValue);
const renderElement = useCallback(elProps => <Element {...elProps} />, []);
useEffect(() => {
console.log(Prism.plugins)
// Disable this to see that Slate returns properly formatted code
Prism.plugins.KeepMarkup = true;
Prism.plugins.LineNumbers = true;
Prism.highlightAll();
}, []);
return (
<>
<Slate
editor={editor}
And my Element,js file code-
import React from 'react'; import 'prismjs/themes/prism.css' const Element = ({ attributes, children, element }) => { switch (element.type) { case 'code-line': return <div {...attributes}>{children}</div>; case 'code-block': return ( <pre {...attributes}> <code className="language-javascript">{children}</code> </pre> ); default: return <div {...attributes}>{children}</div>; } }; export default Element;
Please help me out i have searched whole internet and i am not getting why its happening whenever i remove the class from Element.js it works fine but it then it doesn't show highlighting so please help me out.
Beta Was this translation helpful? Give feedback.
All reactions