Question :How to Black on White Style for Sushi Text Previews

Using the Sushi preview, text documents come up as white on black.

How can I change it to black on white.

Turning on “Accessibility > High Contrast” works, but I don’t want the other effects of the “High Contrast” mode.

I see there is a markdown.lang syntax highlight file in /usr/share/ but this doesn’t seem to be used by Sushi.

Could this be used somehow?

I create this file

/home/fuh/.local/share/sushi/viewers/markdown.js

const {Gdk, Gio, GLib, GObject, Gtk, GtkSource} = imports.gi;

const Renderer = imports.ui.renderer;

var Klass = GObject.registerClass({
    Implements: [Renderer.Renderer],
    Properties: {
        fullscreen: GObject.ParamSpec.boolean('fullscreen', '', '',
                                              GObject.ParamFlags.READABLE,
                                              false),
        ready: GObject.ParamSpec.boolean('ready', '', '',
                                         GObject.ParamFlags.READABLE,
                                         false)
    },
}, class MarkdownRenderer extends Gtk.ScrolledWindow {
    get ready() {
        return !!this._ready;
    }

    get fullscreen() {
        return !!this._fullscreen;
    }

    _init(file, fileInfo) {
        super._init();

        let buffer = this._createBuffer(file, fileInfo);
        this._view = new GtkSource.View({ buffer: buffer,
                                          editable: true,
                                          cursor_visible: false,
                                          monospace: false,
                                          wrap_mode: 2, 
                                          show_line_numbers: false });
        this._view.set_can_focus(false);
        this.add(this._view);
        this.isReady();
    }

    _createBuffer(file, fileInfo) {
        let buffer = new GtkSource.Buffer();
        let styleManager = GtkSource.StyleSchemeManager.get_default();
        let stylePath = GLib.build_filenamev([pkg.pkgdatadir,
                                              'gtksourceview-4',
                                              'styles']);
        styleManager.prepend_search_path(stylePath);

        let scheme = styleManager.get_scheme('peninsula');
        buffer.set_style_scheme(scheme);

        let langManager = GtkSource.LanguageManager.get_default();
        let language = langManager.guess_language(file.get_basename(),
                                                  fileInfo.get_content_type());
        if (language)
            buffer.set_language(language);

        let sourceFile = new GtkSource.File({ location: file });
        let loader = new GtkSource.FileLoader({ buffer: buffer,
                                                file: sourceFile });
        loader.load_async(0, null, null, (loader, result) => {
            try {
                loader.load_finish(result);
            } catch (e) {
                this.emit('error', e);
            }
        });

        return buffer;
    }

    get moveOnClick() {
        return false;
    }
});

// register for text/plain and let the mime handler call us for child types
var mimeTypes = [
    'text/markdown'
];

how can I make it load the style sheet that I want?

it seems it just ignores the gtksourceview-4 XML

the fact it does what I want when I enable “High Contrast” means this should be simple

It should follow system Light or Dark settings , and should not be tied to accessibility.

It’s spring, I can’t see white on black in the daylight.

Accessibility makes everything look awful.

fixed it. reading the various closed issues on the same problem was quite sad.

Could you link to your solution or gitlab issue involved? Btw Sushi lacks a Markdown previewer, so you could submit yours so others can benefit too.

Hi,

I’m afraid I am not a programmer and don’t have a git account.

I just tweaked the existing text viewer.

after poking about at the contents of the RPM, I copied the XML files from

/usr/share/gnome-text-editor/styles

and edited them all to have the same style-scheme id like this

<style-scheme id="builder-dark" name="Builder Dark" version="1.0">

then when I want to switch styles I copy and rename that file to here :

/usr/share/sushi/gtksourceview-4/styles/builder-dark.style-scheme.xml

I also copied the text.js viewer from the sushi source code and changed it a bit to remove line numbers, display the grid pattern, and wrap the text.

that file goes in

~/.local/share/sushi/viewers/markdown.js

const {Gdk, Gio, GLib, GObject, Gtk, GtkSource} = imports.gi;

const Renderer = imports.ui.renderer;

var Klass = GObject.registerClass({
    Implements: [Renderer.Renderer],
    Properties: {
        fullscreen: GObject.ParamSpec.boolean('fullscreen', '', '',
                                              GObject.ParamFlags.READABLE,
                                              false),
        ready: GObject.ParamSpec.boolean('ready', '', '',
                                         GObject.ParamFlags.READABLE,
                                         false)
    },
}, class MarkdownRenderer extends Gtk.ScrolledWindow {
    get ready() {
        return !!this._ready;
    }

    get fullscreen() {
        return !!this._fullscreen;
    }

    _init(file, fileInfo) {
        super._init();

        let buffer = this._createBuffer(file, fileInfo);
        this._view = new GtkSource.View({ buffer: buffer,
                                          editable: true,
                                          cursor_visible: true,
                                          monospace: true,
                                          wrap_mode: 2,
                                          background_pattern: true,
                                          show_line_numbers: false });
        this._view.set_can_focus(false);
        this.add(this._view);
        this.isReady();
    }

    _createBuffer(file, fileInfo) {
        let buffer = new GtkSource.Buffer();
        let styleManager = GtkSource.StyleSchemeManager.get_default();
        let stylePath = GLib.build_filenamev([pkg.pkgdatadir,
                                              'gtksourceview-4',
                                              'styles']);
        styleManager.prepend_search_path(stylePath);

        let scheme = styleManager.get_scheme('builder-dark');
        buffer.set_style_scheme(scheme);

        let langManager = GtkSource.LanguageManager.get_default();
        let language = langManager.guess_language(file.get_basename(),
                                                  fileInfo.get_content_type());
        if (language)
            buffer.set_language(language);

        let sourceFile = new GtkSource.File({ location: file });
        let loader = new GtkSource.FileLoader({ buffer: buffer,
                                                file: sourceFile });
        loader.load_async(0, null, null, (loader, result) => {
            try {
                loader.load_finish(result);
            } catch (e) {
                this.emit('error', e);
            }
        });

        return buffer;
    }

    get moveOnClick() {
        return false;
    }
});

// register for text/markdown and let the mime handler call us for child types
var mimeTypes = [
    'text/markdown'
];

I haven’t worked out how to style it yet. I just want to change the font size
maybe something in

~/.config/gtk-4.0/gtk.css

but what the css selector is I don’t know.

But that’s enough to turn it from illegible into quite nice looking and usable. I can now see previews of my markdown documents in daylight.


I also copied the html.js from sushi source code and tried to edit it so it would run the markdown file through pandoc somehow but I’m too stupid to do it and gave up.

the html viewer is also quite slow so I’m satisfied with the tweaked text viewer.


edit :

i’ve jiggered about with the XML files I’m using quite a bit so I’m not clear on where I copied them from. some combination of the original from the RPM and the ones I found in the GTK.4 folder.
but they need that “dark theme” id to work.

Reddit discussion of the same thing, with some development of the above hack

https://www.reddit.com/r/gnome/comments/143fbcf/how_to_edit_the_appearance_of_gnomesushi_code/

This topic was automatically closed 45 days after the last reply. New replies are no longer allowed.