Is it possible to style RunKit?

Question

Are there any possible ways to customize the styling of RunKit (https://runkit.com)? Like make the background of the editor to dark theme.

I tried injecting styles to the RunKit iframe but it does not work. Looking for any suggestions or any solutions.

score 3 · Answer 1 · answered Jun 11 '19 at 13:40

1. Summary

Use RunKit theme maker.

It not documented for June 2019.

2. Demonstration

Gutter line numbers in left side has a bad visible.

Codepen demo:

Before

I edit Text parameter in theme-maker.

Text

Codepen demo:

After

(But besides line numbers RunKit also change text color of my notebook.)

3. Disclaimer

Data of this answer were relevant in June 2019 and may be obsolete in the future.

Method of this answer is uncomfortable, and I very hope that in the future there will be another.

4. Note

You can't overwrite embed RunKit and any another iframe styles of another domain via CSS:

5. Sources

5.1. Without styles

I attach RunKit to existing element.

Codepen demo:

<script src="https://embed.runkit.com" data-element-id="KiraRunkit"></script>
<article>
    <pre id="KiraRunkit">
        var stringSimilarity = require('string-similarity')

        var similarity = stringSimilarity.compareTwoStrings('Кира', 'Кирк');
    </pre>
</article>

body
    height 100%
    overflow hidden
    background-color sienna

article
    margin-left 2rem
    margin-right 2rem

// [INFO] Responsive iframe:
// https://medium.com/@mahbub_hemel/how-to-make-your-video-iframe-responsive-a8c5fda821ba
#KiraRunkit
    width 100%
    position relative

iframe
    width 100%
    height 100%
    position absolute
    /* [INFO] Instead of frameborder — http://stackoverflow.com/a/10831379/5951529 */
    border 0

5.2. With styles

I programmaticaly create a notebook. Options:

element — HTML element, for which you will apply RunKit.
source — full source of your RunKit notebook; use \n for line breaking.
syntaxTheme — theme, that you create.

JavaScript code you find in your theme-maker page.

Codepen demo:

<script src="https://embed.runkit.com"></script>
<article>
    <div id="KiraRunkit"></div>
</article>

body
    height 100%
    overflow hidden
    background-color sienna

article
    margin-left 2rem
    margin-right 2rem

// [INFO] Responsive iframe:
// https://medium.com/@mahbub_hemel/how-to-make-your-video-iframe-responsive-a8c5fda821ba
#KiraRunkit
    width 100%
    position relative

iframe
    width 100%
    height 100%
    position absolute
    /* [INFO] Instead of frameborder — http://stackoverflow.com/a/10831379/5951529 */
    border 0

##########
# RunKit #
##########
# Run npm code online in browser:
# https://runkit.com
# Needs use theme-maker, that change styles:
# https://runkit.com/docs/theme-maker
notebook = RunKit.createNotebook(
    # [NOTE] Id required, class will not work
    element: document.getElementById('KiraRunkit')
    # [NOTE] You need paste here content of your RunKit notebook even if it big:
    source: 'var stringSimilarity = require(\'string-similarity\')\n\n\
                var similarity = stringSimilarity.compareTwoStrings(\'Кира\', \'Кирк\');'
    # [INFO] https://runkit.com/docs/theme-maker/untilted-2jxk2crve1p7 theme
    syntaxTheme: 'untilted-028u85ijnoyr')

6. Problems

You can have these problems, when you edit your theme via theme-maker:

If you need set exact color, You have to work hard, that make it in theme-maker.
After the second and subsequent theme editions, changes may not display.
Read notes in CoffeeScript file from previous section, that read about another limits.