highlighting code

[mirik999]

Hi people, anybody can explain please, how to highlight code with any module (highlight or prism or any module) ?

[lcasartelli]

+1

[ferrao]

+1, this is a killer feature for me.

[ferrao]

If I can get some guidance, I am ok with putting work on this @jpuri.

[ferrao]

I have just been able to grab the editor state from rdw and convert it into the right state to load on a plain draft-js editor with prism syntax highlight support.

This is enough for my use case, as I have different components for editing and viewing. Let me know if this interests you @lcasartelli.

[ScottAgirs]

hey guys, did you find a solution? trying to decide between SlateJS and this package. been struggling for weeks with this @ferrao @lcasartelli

[cpdwyer]

Using the color picker override I created a component with font and highlight colors

toolbar={{
   colorPicker: { component: FontColorPickers },
 }}

import FontColor from "./font-color";
import HighLightColor from "./highlight-color";

function FontColorPickers(props) {
  return (
    <div style={{ display: "flex" }}>
      <FontColor {...props} />
      <HighLightColor {...props} />
    </div>
  );
}

Using the documented example for overriding the picker to write my custom pickers. Then in the for the highlight the only difference is the first argument passed back in the onChange.

FontColor:

  const onPickerChange = color => {
    onChange("color", color.hex);
  };

Highlight:

const onPickerChange = color => {
    onChange("bgcolor", color .hex);
    setOpen(false);
 };