Disable rendering on the frontend

Hi @item55 ,

Thank you for your kind words ?? And glad you like it.

If you are talking about the native wordpress preview panel – the url ending with /?preview=true – I don’t think there is a way to disable it and that wouldn’t be smart from me to give users the option to toggle it on/off. It’s still working fine, and the real native preview gives a rendering with the real design ??

On the edit screen what you can do is for example hiding the preview button from the sidebar. There is no such feature at the moment – and probably won’t be no offense – but you can easily achieve this with browser addons such as Stylish (or any addon allowing custom user styles and scripts).
Disclaimer: I’m not affiliated with them, their free account works well and you can easily test and save snippets on the fly ?? Have been on the net for decades.

I don’t know your skill in coding, basically you install a tiny addon for your browser (Firefox Version, Chrome Version, etc…) that allows you to add your own styles (CSS language) for specific websites. Here is a snippet that should allow you to hide the “Preview the modifications” button from the sidebar :
https://mega.nz/file/48kzWLRR#zJ61I1Vu7LKq8zOXAy2oqSJqxrponA5gNVgKF1OmgQI

Here is the related snippet code :

#minor-publishing-actions .preview.button {
  display: none !important
}

Let me know if this work for you, or feel free to give me more information about what you are trying to achieve so I can tell you more interesting feedback.

Best regards,

Peter

Hi,

Thank you for taking the time to give me such a detailed explanation.

I’m afraid I didn’t explain myself clearly. What I meant to say is that I would like the option to disable rendering on the edit window.

For example: if you enter # This is a heading, it automatically renders with the # included, you know what I mean? I wonder if we can have the option to disable that and just have the raw markdown code in the window and still be able to view the preview using one of the buttons as usual.

I hope I explained myself better this time.

Thanks again!

Poke @item55 , no worries, thank you for explaining me, I guess I got it this time ??

Do you mean something like that ?
https://mega.nz/file/5xtFTJoA#G_jeOFG2kbqMM5Blm2H6VVcxfXfPi7fIFNLEwEwVWJQ

In this case, following the similar process as explained earlier, could you give a new try please with the following snippet ? ??

.CodeMirror-line span {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    line-height: inherit !important;
    background: transparent !important;
}

This is the one I used to take the screenshot. The editor is based on CodeMirror so actually it’s possible to override the styles. If that works for you, I can try to add an option inside the settings panel in the near future, after making sure we don’t break anything critical ???♂?

Appreciate your help, kind regards

Peter

• This reply was modified 1 month, 1 week ago by Pierre-Henri Lavigne. Reason: Typo

Hi,

So I installed Stylish (Firefox) as per your recommendation and, after tweaking around the snippet you shared, I think I got what I wanted.

The edited snippet looks like this:

.CodeMirror-line span {
    color: inherit !important;
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 14px !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    line-height: inherit !important;
    background: transparent !important;
}

And the end result looks like this:

I tried to add a dark background but it didn’t work. I think this works for me, for now.

I will mark this as resolved but, please, if you have further feedback or if you want me to test something else, let me know.

Thanks!

• This reply was modified 1 month, 1 week ago by ItEm55.

Well done @item55 !

I don’t know your skills in programming and have no idea if that was hard for you, I appreciate your trusted me on the topic and super happy that your make it work ??. Good job ??

It looks like I need to make a “skin” feature, that’s gonna take a bit of time and not in high priority in my TODO currently. If you can stick with Stylish or a similar addon for a a few months that would be great ???♂? ??

About the “dark mode”, here is a quick snippet you can customize with your own colors :

.CodeMirror-line span {
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: inherit !important; /* Need Important to override */
  font-weight: inherit !important; /* Need Important to override */
  font-style: inherit !important; /* Need Important to override */
  line-height: inherit !important; /* Need Important to override, 1.5 / 150% / works */
}
/* Example to keep monospace font for html tag */
.CodeMirror-line span.cm-tag {
  font-family: "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace;
}
/* Example of Dark Mode for the edit mode */
.EasyMDEContainer .CodeMirror-wrap {
  background: #333;
}
.CodeMirror-line span {
  color: #eee;
}
/* Example of Dark Mode for the preview mode */
.editor-preview-side {
  background: #333;
}
.editor-preview-side * {
  color: #eee;
}

Hope it helps. Kind regards

Peter