可以设置RunKit的样式吗？
可以设置RunKit的样式吗？
提问于 2019-04-17 01:34:57
是否有任何可能的方法来定制RunKit (https://runkit.com)的样式？比如把编辑器的背景改成深色主题。
我尝试向RunKit iframe注入样式，但不起作用。寻找任何建议或解决方案。
回答 1
Stack Overflow用户
发布于 2019-06-11 21:40:47
1.总结
使用。
它没有记录在2019年6月。
2.演示
左侧的边沟线号的可见性很差。
我在theme-maker中编辑Text参数。
(但除了行号之外，RunKit还会改变我笔记本的文本颜色。)
3.免责声明
此答案的数据在2019年6月是相关的，将来可能会过时。
这个答案的方法是不舒服的，我非常希望在未来会有另一个。
4.注意事项
你不能通过CSS覆盖嵌入RunKit和其他域的任何其他iframe样式：
5.资料来源
5.1。没有样式
I 。
<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 05.2。使用样式
I 。选项：
element- HTML元素，您将对其应用RunKit.source- RunKit笔记本的完整源代码；为您创建的行breaking.syntaxTheme-RunKit使用\n。
在中找到的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.
- After的第二个和后续的主题版本，变化可能不会从上一节的CoffeeScript文件中读取有关另一个限制。
7.额外链接
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55713742
复制相关文章
相似问题