Individual colour scheme / theme / style for editor and preview panes?

There seems to be partial support for this with the editor(apart from foreground/background colours being ignored due to system theme?). I also saw you mention that the preview panel is HTML and can be styled with CSS.

Would it be possible to include a theme selection in the settings like editor has, instead changing the CSS file used?

That would be nice, but since there are a nearly infinite amount of CSS styling possibilities I'm not sure if that would make much sense (if you are talking about actually selecting some colors and so on in the settings dialog)...

@pbek I was just referring to a css file that you could import and select, similar to colour scheme. This would just be more straightforward for themes and sharing than requiring user to be aware of script method which might require more technical skill/instructions vs downloading or being given a css file + discovery of theming preview pane via it's settings page/tab.

That said I wouldn't be against colour picker for each markdown element.

I also think that adding the ability to edit/add CSS file would be an improvement. I've seen this option in other markdown editors - it is easier to add this functionality than an endless amount of customisation checkboxes, colour pickers etc. For example this would make it possible to easily style tables.

There already is a script function to add custom stylesheets: http://docs.qownnotes.org/en/develop/scripting/README.html#add-a-custom-stylesheet

@pbek that's great, wouldn't it be good to have it in the settings window like how you can set an editor theme? just import css file and add it to a drop down menu like colour schemes? Makes it more discoverable to regular users. If you had a few css themes for the preview pane to provide would it be justified?

What would be the advantage over the current process?

Now you select a script where you set the css. You can even make special modifications of the styles, for example run a script that generates styles or change styles for every note differently.

With the "new system" you only can set a css file and that's it... In my eyes that's no improvement and just adds complexity. It would make more sense if there would be a kind css editor for each kind of tag. But that would be a tremendous amount of work.

Makes it more discoverable to regular users.

Currently you're suggesting they be aware of this feature mentioned in scripting documentation(not provided as a template script already in QOwnNotes? That's not very friendly or discoverable for a casual user for an often desirable feature.

If all I use the editor colour scheme for is to click the drop down look at the preview for what I like and apply it, is the settings not useful to me? Should I be using a script instead?

With the "new system" you only can set a css file and that's it... In my eyes that's no improvement and just adds complexity.

As said above, QOwnNotes could have a few default themes like editor pane has in a drop down, along with import button. User selects it and applies it. This is less complicated to discover and use for casual users who may be put off with learning that such a feature exists if they understand about the scripting feature QOwnNotes provides(which is pretty cool and I'm fine with it, but some friends I know wouldn't bother). I've personally tried out a bunch of Markdown editors and sometimes it really does come down to easy configuration of themes if even possible, some defaults the editors use I could not work with for long documents.

This wouldn't be too difficult to implement I assume based on existing work and the complexity is less for the user, why do you think it adds complexity?

It would make more sense if there would be a kind css editor for each kind of tag. But that would be a tremendous amount of work.

That would be extra nice yes, but necessary for the feature to be useful to QOwnNotes and it's users. Take Atom editor for example, it has plenty of amazing themes, I can choose one and apply it with the click of a button. Only if I want to modify that theme do I need to open up the css and change it(or a copy of it).

As a user I can take advantage of the themes others have created or been provided by QOwnNotes(I could probably put some together for you if you were to implement this feature), I could also as a more technical user, edit or create my own theme and share that around to be easily added with an import.

You are talking about the CSS of the the html code of the markdown preview, right? Because your title suggest you are talking about the QML styles of the widgets... Please note that the preview pane is no fully fledged web-browser (like Atom uses because it's a web-application), but a QTextEdit. Only a limited sub-set of css is usable...

Provide me with a CSS "theme" for the markdown preview and I will think about implementing it.

In the meantime, this isn't actually turnkey but is what I am using to manage the markdown preview window styling.

import QtQml 2.0


/**
 * This is an example for custom styling of html in the note preview
 */
QtObject {

    /**
     * This function returns the contents of a text file
     * @param     {string} fileUrl file name relative to script file
     * @return    {string}         contents of file
     */
    function openFile(fileUrl) {
         var request = new XMLHttpRequest();
         request.open("GET", fileUrl, false);
         request.send(null);
         return request.responseText;
    }

    /**
     * This function is called when the markdown html of a note is generated
     *
     * It allows you to modify this html
     * This is for example called before by the note preview
     *
     * @param {NoteApi} note - the note object
     * @param {string} html - the html that is about to being rendered
     * @return {string} the modfied html or an empty string if nothing should be modified
     */
    function noteToMarkdownHtmlHook(note, html) {
        var stylesheet = openFile("style.css");
        html = html.replace("</style>", stylesheet + "</style>");
        return html;
    }
}

This script will allow you to apply a css file to your preview. This doesn't allow you to select it from a list but all you need to do is change the file name in the script or drop a new css file in the directory.

pretty neat ;)

Great script! The "select from list" part or the file selection dialog can also be implemented with Qt Quick.

I have found a few themes, I don't know if they help or not..

https://github.com/jasonm23/markdown-css-themes

http://jasonm23.github.io/markdown-css-themes/

They have to work in the QTextEdit, that is used for the preview. We don't use a fully fledged internet browser.

Other way to format is to use pandoc, for example;

pandoc -f markdown_github file.md -t html -o file.html

To do this all with pandoc would be the preferred way for me... But of course it would have to be installed on the user's system.

that is easy "sudo apt install pandoc" in ubuntu

Hey, maybe since pandoc is licensed under GPL you can think about integrating pandoc in your build process and distributing it with your application ?

Styling the preview panel is an important feature I think. It would also enable different kind of markdown-flavor implementation, which could be a huge bonus for styling code blocks for example.

Pandoc seems to be written in Haskell and I have no experience with that. And there is not one build process, but more than 15 for maybe more than 30 different platforms. :)

There is a script in the script repository to easily inject stylesheets into the preview.

There are also 89 styles (in CSS) from https://highlightjs.org/