是否可以设置RunKit的样式?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (13)

有没有可能的方法来自定义RunKit(https://runkit.com)的样式?喜欢将编辑器的背景设为黑色主题。

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

提问于
用户回答回答于

1.总结

使用RunKit主题制作者

它没有记录2019年6月。

2.示范

左侧的装订线数字可见不良。

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

(但除了行号RunKit也改变了笔记本的文字颜色。)

3.免责声明

这个答案的数据在2019年6月是相关的,将来可能会过时。

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

注意

你不能通过CSS覆盖嵌入的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。有风格

programmaticaly创建一个笔记本。选项:

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

当您通过主题制作者编辑主题时,您可能会遇到这些问题:

  1. 如果你需要设置准确的颜色,你必须努力工作,使其成为主题制作者。
  2. 在第二个和后续主题版本之后,可能不会显示更改。
  3. 阅读上一节中CoffeeScript文件中的注释,其中包含有关其他限制的内容。

7.额外的链接

扫码关注云+社区

领取腾讯云代金券