blocks|key|2529380|text|1.总结|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2529381|使用。|2529382|它没有记录在2019年6月。|2529383|2529384|2.演示|2529385|左侧的边沟线号的可见性很差。|2529386|2529387|unordered-list-item|2529388|2529389|​|2529390|📷|atomic|offset|length|2529391|2529392|我在theme-maker中编辑Text参数。|style|CODE|2529393|2529394|2529395|2529396|2529397|2529398|2529399|2529400|2529401|2529402|(但除了行号之外，RunKit还会改变我笔记本的文本颜色。)|2529403|2529404|3.免责声明|2529405|此答案的数据在2019年6月是相关的，将来可能会过时。|2529406|这个答案的方法是不舒服的，我非常希望在未来会有另一个。|2529407|2529408|4.注意事项|2529409|你不能通过CSS覆盖嵌入RunKit和其他域的任何其他iframe样式：|2529410|2529411|2529412|2529413|2529414|2529415|5.资料来源|2529416|5.1。没有样式|2529417|I+。|2529418|2529419|2529420|2529421|<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>|code-block|syntax|javascript|2529422|body
++++height+100%25
++++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%25
++++position+relative

iframe
++++width+100%25
++++height+100%25
++++position+absolute
++++/*+[INFO]+Instead+of+frameborder+—+http://stackoverflow.com/a/10831379/5951529+*/
++++border+0|2529423|5.2。使用样式|2529424|I+。选项：|2529425|2529426|element+-+HTML元素，您将对其应用RunKit.|2529427|source+-+RunKit笔记本的完整源代码；为您创建的行breaking.|2529428|syntaxTheme+-RunKit使用\n。|2529429|2529430|在中找到的JavaScript代码。|2529431|2529432|2529433|2529434|<script+src="https://embed.runkit.com"></script>
<article>
++++<div+id="KiraRunkit"></div>
</article>|2529435|body
++++height+100%25
++++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%25
++++position+relative

iframe
++++width+100%25
++++height+100%25
++++position+absolute
++++/*+[INFO]+Instead+of+frameborder+—+http://stackoverflow.com/a/10831379/5951529+*/
++++border+0|2529436|##########
#+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')|2529437|2529438|6.问题|2529439|当您通过编辑主题时，您可能会遇到这些问题|2529440|如果你需要设置精确的颜色，你必须努力，这使得它在theme-maker.|2529441|After的第二个和后续的主题版本，变化可能不会从上一节的CoffeeScript文件中读取有关另一个限制。|2529442|2529443|2529444|7.额外链接|2529445|2529446|2529447|+|2529448|2529449|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/fe598c72a84dc3b372c376d181c1008e.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/3a119533006a87530b25babfb8610f53.png|2|https://ask.qcloudimg.com/http-save/yehe-900000/f599dea4ba8368a77d7379d8bb2f5ef7.png|3|LINK|MUTABLE|url|https://github.com/runkitdev/react-runkit/pull/4^0|0|0|0|0|0|0|0|0|0|0|0|1|0|0|0|G|4|0|0|0|1|1|0|0|0|0|0|0|0|1|2|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|7|0|0|6|0|0|B|L|2|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|1|3|0|0^^$0|@$1|2|3|4|5|6|7|3V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|3W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|3X|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|3Y|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|3Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|40|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|41|8|@]|9|@]|A|$]]|$1|L|3|-4|5|M|7|42|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|43|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|44|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|45|8|@]|9|@$T|46|U|47|1|48]]|A|$]]|$1|V|3|P|5|6|7|49|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|4A|8|@$T|4B|U|4C|Y|Z]]|9|@]|A|$]]|$1|10|3|P|5|6|7|4D|8|@]|9|@]|A|$]]|$1|11|3|R|5|S|7|4E|8|@]|9|@$T|4F|U|4G|1|4H]]|A|$]]|$1|12|3|P|5|6|7|4I|8|@]|9|@]|A|$]]|$1|13|3|-4|5|6|7|4J|8|@]|9|@]|A|$]]|$1|14|3|-4|5|M|7|4K|8|@]|9|@]|A|$]]|$1|15|3|-4|5|6|7|4L|8|@]|9|@]|A|$]]|$1|16|3|P|5|6|7|4M|8|@]|9|@]|A|$]]|$1|17|3|R|5|S|7|4N|8|@]|9|@$T|4O|U|4P|1|4Q]]|A|$]]|$1|18|3|P|5|6|7|4R|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|4S|8|@]|9|@]|A|$]]|$1|1B|3|-4|5|6|7|4T|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|6|7|4U|8|@]|9|@]|A|$]]|$1|1E|3|1F|5|6|7|4V|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|6|7|4W|8|@]|9|@]|A|$]]|$1|1I|3|-4|5|6|7|4X|8|@]|9|@]|A|$]]|$1|1J|3|1K|5|6|7|4Y|8|@]|9|@]|A|$]]|$1|1L|3|1M|5|6|7|4Z|8|@]|9|@]|A|$]]|$1|1N|3|-4|5|6|7|50|8|@]|9|@]|A|$]]|$1|1O|3|-4|5|M|7|51|8|@]|9|@]|A|$]]|$1|1P|3|-4|5|M|7|52|8|@]|9|@]|A|$]]|$1|1Q|3|-4|5|6|7|53|8|@]|9|@]|A|$]]|$1|1R|3|-4|5|6|7|54|8|@]|9|@]|A|$]]|$1|1S|3|1T|5|6|7|55|8|@]|9|@]|A|$]]|$1|1U|3|1V|5|6|7|56|8|@]|9|@]|A|$]]|$1|1W|3|1X|5|6|7|57|8|@]|9|@]|A|$]]|$1|1Y|3|-4|5|6|7|58|8|@]|9|@]|A|$]]|$1|1Z|3|-4|5|M|7|59|8|@]|9|@]|A|$]]|$1|20|3|-4|5|6|7|5A|8|@]|9|@]|A|$]]|$1|21|3|22|5|23|7|5B|8|@]|9|@]|A|$24|25]]|$1|26|3|27|5|23|7|5C|8|@]|9|@]|A|$24|25]]|$1|28|3|29|5|6|7|5D|8|@]|9|@]|A|$]]|$1|2A|3|2B|5|6|7|5E|8|@]|9|@]|A|$]]|$1|2C|3|-4|5|6|7|5F|8|@]|9|@]|A|$]]|$1|2D|3|2E|5|M|7|5G|8|@$T|5H|U|5I|Y|Z]]|9|@]|A|$]]|$1|2F|3|2G|5|M|7|5J|8|@$T|5K|U|5L|Y|Z]]|9|@]|A|$]]|$1|2H|3|2I|5|M|7|5M|8|@$T|5N|U|5O|Y|Z]|$T|5P|U|5Q|Y|Z]]|9|@]|A|$]]|$1|2J|3|-4|5|6|7|5R|8|@]|9|@]|A|$]]|$1|2K|3|2L|5|6|7|5S|8|@]|9|@]|A|$]]|$1|2M|3|-4|5|6|7|5T|8|@]|9|@]|A|$]]|$1|2N|3|-4|5|M|7|5U|8|@]|9|@]|A|$]]|$1|2O|3|-4|5|6|7|5V|8|@]|9|@]|A|$]]|$1|2P|3|2Q|5|23|7|5W|8|@]|9|@]|A|$24|25]]|$1|2R|3|2S|5|23|7|5X|8|@]|9|@]|A|$24|25]]|$1|2T|3|2U|5|23|7|5Y|8|@]|9|@]|A|$24|25]]|$1|2V|3|-4|5|6|7|5Z|8|@]|9|@]|A|$]]|$1|2W|3|2X|5|6|7|60|8|@]|9|@]|A|$]]|$1|2Y|3|2Z|5|6|7|61|8|@]|9|@]|A|$]]|$1|30|3|31|5|6|7|62|8|@]|9|@]|A|$]]|$1|32|3|33|5|M|7|63|8|@]|9|@]|A|$]]|$1|34|3|-4|5|6|7|64|8|@]|9|@]|A|$]]|$1|35|3|-4|5|6|7|65|8|@]|9|@]|A|$]]|$1|36|3|37|5|6|7|66|8|@]|9|@]|A|$]]|$1|38|3|-4|5|6|7|67|8|@]|9|@]|A|$]]|$1|39|3|-4|5|M|7|68|8|@]|9|@]|A|$]]|$1|3A|3|3B|5|M|7|69|8|@]|9|@$T|6A|U|6B|1|6C]]|A|$]]|$1|3C|3|-4|5|6|7|6D|8|@]|9|@]|A|$]]|$1|3D|3|-4|5|6|7|6E|8|@]|9|@]|A|$]]]|3E|$3F|$5|3G|3H|3I|A|$3J|3K|3L|-4]]|3M|$5|3G|3H|3I|A|$3J|3N|3L|-4]]|3O|$5|3G|3H|3I|A|$3J|3P|3L|-4]]|3Q|$5|3R|3H|3S|A|$3T|3U]]]]

<h2>1. Summary</h2>

<p>Use <a href="https://runkit.com/docs/theme-maker" rel="nofollow noreferrer"><strong>RunKit theme maker</strong></a>.</p>

<p>It not documented for June 2019.</p>

<hr>

<h2>2. Demonstration</h2>

<p>Gutter line numbers in left side has a bad visible.</p>

<ul>
<li><a href="https://codepen.io/Kristinita/full/ZdEmpq" rel="nofollow noreferrer"><strong>Codepen demo</strong></a>:</li>
</ul>

<p><img src="https://i.imgur.com/wigZetf.png" alt="Before"></p>

<p>I edit <code>Text</code> parameter in theme-maker.</p>

<p><img src="https://i.imgur.com/IE3fEvl.png" alt="Text"></p>

<ul>
<li><a href="https://codepen.io/Kristinita/full/vqYzqV" rel="nofollow noreferrer"><strong>Codepen demo</strong></a>:</li>
</ul>

<p><img src="https://i.imgur.com/weerIHT.png" alt="After"></p>

<p><em>(But besides line numbers RunKit also change text color of my notebook.)</em></p>

<hr>

<h2>3. Disclaimer</h2>

<p>Data of this answer were relevant in June 2019 and may be obsolete in the future.</p>

<p>Method of this answer is uncomfortable, and I very hope that in the future there will be another.</p>

<hr>

<h2>4. Note</h2>

<p>You can't overwrite embed RunKit and any another iframe styles of another domain via CSS:</p>

<ul>
<li><a href="https://stackoverflow.com/q/217776/5951529"><strong>How to apply CSS to iframe?</strong></a></li>
<li><a href="https://stackoverflow.com/q/6494721/5951529"><strong>Override body style for content in an iframe</strong></a></li>
</ul>

<hr>

<h2>5. Sources</h2>

<h3>5.1. Without styles</h3>

<p>I <a href="https://runkit.com/docs/embed" rel="nofollow noreferrer"><strong>attach RunKit to existing element</strong></a>.</p>

<ul>
<li><a href="https://codepen.io/Kristinita/pen/ZdEmpq" rel="nofollow noreferrer"><strong>Codepen demo</strong></a>:</li>
</ul>

<pre class="lang-html prettyprint-override"><code>&lt;script src="https://embed.runkit.com" data-element-id="KiraRunkit"&gt;&lt;/script&gt;
&lt;article&gt;
    &lt;pre id="KiraRunkit"&gt;
        var stringSimilarity = require('string-similarity')

        var similarity = stringSimilarity.compareTwoStrings('Кира', 'Кирк');
    &lt;/pre&gt;
&lt;/article&gt;
</code></pre>

<pre class="lang-stylus prettyprint-override"><code>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
</code></pre>

<h3>5.2. With styles</h3>

<p>I <a href="https://runkit.com/docs/embed" rel="nofollow noreferrer"><strong>programmaticaly create a notebook</strong></a>. Options:</p>

<ul>
<li><code>element</code> — HTML element, for which you will apply RunKit.</li>
<li><code>source</code> — full source of your RunKit notebook; use <code>\n</code> for line breaking.</li>
<li><code>syntaxTheme</code> — theme, that you create.</li>
</ul>

<p>JavaScript code you find in your <a href="https://runkit.com/docs/theme-maker" rel="nofollow noreferrer"><strong>theme-maker page</strong></a>.</p>

<ul>
<li><a href="https://codepen.io/Kristinita/pen/vqYzqV" rel="nofollow noreferrer"><strong>Codepen demo</strong></a>:</li>
</ul>

<pre class="lang-html prettyprint-override"><code>&lt;script src="https://embed.runkit.com"&gt;&lt;/script&gt;
&lt;article&gt;
    &lt;div id="KiraRunkit"&gt;&lt;/div&gt;
&lt;/article&gt;
</code></pre>

<pre class="lang-stylus prettyprint-override"><code>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
</code></pre>

<pre class="lang-coffee prettyprint-override"><code>##########
# 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')
</code></pre>

<hr>

<h2>6. Problems</h2>

<p>You can have these problems, when you edit your theme via <a href="https://runkit.com/docs/theme-maker" rel="nofollow noreferrer"><strong>theme-maker</strong></a>:</p>

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

<hr>

<h2>7. Extra links</h2>

<ul>
<li><a href="https://discuss.runkit.com/t/theme-runkit-embed/541" rel="nofollow noreferrer"><strong>Discussion on RunKit forum</strong></a></li>
<li><a href="https://github.com/runkitdev/react-runkit/pull/4" rel="nofollow noreferrer"><strong>GitHub pull request, that add <code>theme</code> and <code>gutterStyle</code> properties</strong></a></li>
</ul>


<p>Are there any possible ways to customize the styling of RunKit (<a href="https://runkit.com" rel="nofollow noreferrer">https://runkit.com</a>)? Like make the background of the editor to dark theme.</p>

<p>I tried injecting styles to the RunKit iframe but it does not work. Looking for any suggestions or any solutions.</p>


Is it possible to style RunKit?

是否有任何可能的方法来定制RunKit ()的样式？比如把编辑器的背景改成深色主题。我尝试向RunKit iframe注入样式，但不起作用。寻找任何建议或解决方案。

问可以设置RunKit的样式吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以设置RunKit的样式吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以设置RunKit的样式吗？
EN