1

是否有任何可能的方法来自定义 RunKit ( https://runkit.com ) 的样式？就像将编辑器的背景设置为深色主题一样。

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

4

1 回答 1

3

一、总结

使用RunKit 主题制作工具。

它没有记录在 2019 年 6 月。

2. 示范

左侧的排水沟行号有一个不好的可见性。

前

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

文本

后

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

3. 免责声明

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

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

4.注意

您不能通过 CSS 覆盖 embed RunKit 和其他域的任何其他 iframe 样式：

5. 来源

5.1。没有样式

我将 RunKit 附加到现有元素。

<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. 有款式

我以编程方式创建一个 notebook。选项：

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

您在主题制作器页面中找到的 JavaScript 代码。

<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. 额外链接

于 2019-06-11T13:40:46.833 回答