可以对RunKit进行样式设置吗？

Question

有什么可能的方法来自定义RunKit（ https://runkit.com ）的样式？ 就像使编辑器的背景以深色为主题。

我尝试将样式注入RunKit iframe，但是它不起作用。 寻找任何建议或解决方案。

Answer 1

1.总结

使用RunKit主题制作器 。

它没有记录在2019年6月。

---

2.示范

左侧的装订线行号可见不好。

• Codepen演示 ：

我在主题编辑器中编辑Text参数。

• Codepen演示 ：

（但是，除了行号，RunKit还会更改笔记本的文本颜色。）

---

3.免责声明

该答案的数据与2019年6月相关，将来可能已过时。

这个答案的方法令人不舒服，我非常希望将来还会有另一种方法。

---

4.注意

您无法通过CSS覆盖嵌入RunKit和其他域的其他iframe样式：

• 如何将CSS应用于iframe？
• 覆盖iframe中内容的主体样式

---

5.资料来源

5.1。 没有样式

我将RunKit附加到现有元素 。

• Codepen演示 ：

<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。 随着风格

我以编程方式创建一个笔记本 。 选项：

• element — HTML元素，您将对其应用RunKit。
• source -RunKit笔记本的完整来源； 使用\\n换行。
• syntaxTheme —您创建的主题。

您可以在主题创建者页面中找到的JavaScript代码。

• Codepen演示 ：

<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.问题

当您通过theme-maker编辑主题时，可能会遇到以下问题：

1. 如果需要设置准确的颜色，则必须努力工作，这可以使它成为主题制作者。
2. 在第二版和后续主题版本之后，更改可能不会显示。
3. 阅读上一节中CoffeeScript文件中的注释，该注释了解其他限制。

---

7.额外链接

• RunKit论坛讨论
• GitHub拉取请求，添加theme和gutterStyle属性