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.

Answer 1

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:

I edit Text parameter in theme-maker.

• Codepen demo:

(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:

• How to apply CSS to iframe?
• Override body style for content in an iframe

---

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:

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

---

7. Extra links

• Discussion on RunKit forum
• GitHub pull request, that add theme and gutterStyle properties