Можно ли стилизовать RunKit? - PullRequest
Новая
       20

Можно ли стилизовать RunKit?

1 голос
/ 16 апреля 2019

Существуют ли какие-либо возможные способы настройки стиля RunKit (https://runkit.com)? Как сделать фон редактора темной темой.

Я пробовал вставлять стили в iframe RunKit, но это не такработа. Ищу любые предложения или любые решения.

1 Ответ

0 голосов
/ 11 июня 2019

1. Резюме

Использование Создатель тем RunKit .

Не документировано на июнь 2019 года.

2. Демонстрация

Номера строк водостоков в левой части плохо видны.

Before

Я редактирую параметр Text в создателе тем.

text

After

(Но кроме номеров строк RunKit также меняет цвет текста моего блокнота.)

3. Отказ от ответственности

Данные этого ответа были актуальны в июне 2019 года и могут устареть в будущем.

Метод этого ответа неудобен, и я очень надеюсь, что в будущем будет другой.

4. Примечание

Вы не можете перезаписать Embed RunKit и любые другие стили iframe другого домена с помощью CSS:

5. Источники

5,1. Без стилей

I присоединить RunKit к существующему элементу . 



        var stringSimilarity = require('string-similarity')

        var similarity = stringSimilarity.compareTwoStrings('Кира', 'Кирк');
    
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. Со стилями

I программно создать блокнот . Опции:

  • 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. Дополнительные ссылки

...