Adding custom styles

[leem32]

I'd like to add some custom styles to make remark fit better with my page.
According to this remark issue, it's possible to add a custom stylesheet like this:

  var remark_config = {
    site_id: 'YOUR_SITE_ID',
    ...
    style: "https://somehost.com/remark.css"
  };

But it doesn't seem to be working for me. Ive tried both relative and absolute URL's e.g https://somehost.com/css/remark.css and /css/remark.cs, ./css/remark.css.

Am I doing it wrong?

[umputun]

#267 you mentioned is work in progress. I'm not sure if passing style supported in the current version. @Reeywhaar - am I right, or right ;)

[Reeywhaar]

@umputun no, you're right! I made bare minimum in refactoring, to avoid long review (still there is), I am planning to make other features after refactoring will be accepted (#279, external styles, #285, etc...)

@leem32 it's not possible at this moment, unfortunately

[umputun]

closed as dup #5

[leem32]

I thought that might be the case.

In the meantime, I'll just add the styles using pure JS instead.

Here's a couple of examples on how to do that for others who want to add custom styles. They work by first detecting when the iframe is loaded in the dom and then uses an eventListener to detect when the iframe content has loaded and injects the stylesheet into the head of the iframe html..

From my tests both seem to work equally well so just choose the one you prefer.

Example 1

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observer = new MutationObserver(function(mutations) {

    mutations.forEach(function (mutation) {

        [].filter.call(mutation.addedNodes, function (node) {

            return node.nodeName == 'IFRAME';

        }).forEach(function (node) {

            node.addEventListener('load', function (e) {

                console.log("iframe content loaded");

                var iframe = document.querySelector('#remark42 iframe');

                // style iframe element
                // iframe.style.border = "5px solid aqua";

                var style = document.createElement('style');
                style.id = "custom-remark-styles";

                // style.textContent =
                //   'body {' +
                //   '  background-color: green;' +
                //   '  font-weight: italic;' +
                //   '}'
                // ;

                style.textContent = "body { background-color: green; font-weight: italic; }\n" +
                                    "p { padding-bottom: 0; padding-top: 0; }\n" +
                                    "h1 { margin-top: 0; margin-bottom: 0; }\n" +
                                    "div { padding-bottom: 0; padding-top: 0; }";

                iframe.contentDocument.head.appendChild(style);
                console.log(iframe.contentDocument.head);

                // and disconnect
                observer.disconnect();

            });
        });
    });
});

var targetNode = document.getElementById("remark42");
observer.observe(targetNode, { childList: true, subtree: true });

// also works
// observer.observe(document.body, { childList: true, subtree: true });

Example 2
This example also uses the MutationObserver constructor but is more readable.

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observer = new MutationObserver(function(mutations) {

    if (mutations[0].type === "childList") { // optional

        if (document.querySelector("#remark42 iframe")) {
            
            console.log("iframe added to dom");

            var iframe = document.querySelector('#remark42 iframe');

            iframe.addEventListener('load', function (e) {

                console.log("iframe content loaded");

                // style iframe element
                // iframe.style.border = "5px solid aqua";

                var style = document.createElement('style');
                style.id = "custom-remark-styles";

                // style.textContent =
                //   'body {' +
                //   '  background-color: green;' +
                //   '  font-weight: italic;' +
                //   '}'
                // ;

                style.textContent = "body { background-color: green; font-weight: italic; }\n" +
                                    "p { padding-bottom: 0; padding-top: 0; }\n" +
                                    "h1 { margin-top: 0; margin-bottom: 0; }\n" +
                                    "div { padding-bottom: 0; padding-top: 0; }";

                iframe.contentDocument.head.appendChild(style);
                // console.log(iframe.contentDocument.head);

                // and disconnect
                observer.disconnect();

            });
        }
      }
});

var observerConfig = {
    childList: true,
};

var targetNode = document.getElementById("remark42");
observer.observe(targetNode, observerConfig);