Как мне получить два цвета кода в rejectjs?

Как я могу использовать в manifest.js два цвета кода, скажем, один светлый, а другой темный. Вот код с двумя цветовыми кодами, я хочу изменить цвет второго на светлый:

<!doctype html>
<html lang = "en">

    <head>
        <meta charset = "utf-8">

        <title>reveal.js - Auto Animate</title>

        <meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <link rel = "stylesheet" href = "../dist/reveal.css">
        <link rel = "stylesheet" href = "../dist/theme/black.css" id = "theme">
        <link rel = "stylesheet" href = "../plugin/highlight/monokai.css">
    </head>

    <body>
        <div class = "reveal">
            <div class = "slides">
                <section >
                    <pre data-id = "code"><code>
                        println("dark color code is fine here.")
                    </code></pre>
                </section>
            <div class = "slides">
                <section >
                    <pre data-id = "code"><code>
                        println("I want light color code here.")
                    </code></pre>
                </section>
            </div>
        </div>

        <script src = "../dist/reveal.js"></script>
        <script src = "../plugin/highlight/highlight.js"></script>
        <script>
            Reveal.initialize({
                center: true,
                hash: true,
                plugins: [ RevealHighlight ]
            });
        </script>
    </body>
</html>

Любое предложение или комментарий приветствуется

— 31.03.2023 14:10

javascript html css reveal.js

30.03.2023 16:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

114

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Самый простой способ добиться этого - взять тему css

pre code.hljs{display:block;overflow-x:auto;padding:1em}
code.hljs{padding:3px 5px}
.hljs{color:#abb2bf;background:#282c34}

и охват селекторов

pre[data-theme = "monokai"] code.hljs{display:block;overflow-x:auto;padding:1em}
[data-theme = "monokai"] code.hljs{padding:3px 5px}
[data-theme = "monokai"] .hljs{color:#abb2bf;background:#282c34}

Тогда основные моменты будут работать только с прицелом

<section >
    <pre data-id = "code" data-theme = "monokai"><code>
        println("dark color code is fine here.")
    </code></pre>
    <pre data-id = "code" data-theme = "atom-one-light"><code>
        println("light color code is fine here.")
    </code></pre>
</section>

Это будет работать с любой комбинацией любого количества тем (помните, темы могут быть выделены жирным шрифтом и курсивом).

Не существует более простого способа, так как highlightjs, используемый раскрываемостью, изначально не поддерживает несколько тем, иначе он имел бы ограниченную область действия CSS.

Вот полный код (предоставленный Woeitg):

    pre[data-theme = "mycolors2"] .hljs {
      color: #383a42;
      background: #fafafa;
    }
       
    [data-theme = "mycolors2"] .hljs-comment,
    [data-theme = "mycolors2"] .hljs-quote {
      color: #a0a1a7;
      font-style: italic;
    }
    
    [data-theme = "mycolors2"] .hljs-doctag,
    [data-theme = "mycolors2"] .hljs-keyword,
    [data-theme = "mycolors2"] .hljs-formula {
      color: #a626a4;
    }
    
    [data-theme = "mycolors2"] .hljs-section,
    [data-theme = "mycolors2"] .hljs-name,
    [data-theme = "mycolors2"] .hljs-selector-tag,
    [data-theme = "mycolors2"] .hljs-deletion,
    [data-theme = "mycolors2"] .hljs-subst {
      color: #e45649;
    }
    
    [data-theme = "mycolors2"] .hljs-literal {
      color: #0184bb;
    }
    
    [data-theme = "mycolors2"] .hljs-string,
    [data-theme = "mycolors2"] .hljs-regexp,
    [data-theme = "mycolors2"] .hljs-addition,
    [data-theme = "mycolors2"] .hljs-attribute,
    [data-theme = "mycolors2"] .hljs-meta .hljs-string {
      color: #50a14f;
    }
    
    [data-theme = "mycolors2"] .hljs-attr,
    [data-theme = "mycolors2"] .hljs-variable,
    [data-theme = "mycolors2"] .hljs-template-variable,
    [data-theme = "mycolors2"] .hljs-type,
    [data-theme = "mycolors2"] .hljs-selector-class,
    [data-theme = "mycolors2"] .hljs-selector-attr,
    [data-theme = "mycolors2"] .hljs-selector-pseudo,
    [data-theme = "mycolors2"] .hljs-number {
      color: #986801;
    }
    
    [data-theme = "mycolors2"] .hljs-symbol,
    [data-theme = "mycolors2"] .hljs-bullet,
    [data-theme = "mycolors2"] .hljs-link,
    [data-theme = "mycolors2"] .hljs-meta,
    [data-theme = "mycolors2"] .hljs-selector-id,
    [data-theme = "mycolors2"] .hljs-title {
      color: #4078f2;
    }
    
    [data-theme = "mycolors2"] .hljs-built_in,
    [data-theme = "mycolors2"] .hljs-title.class_,
    [data-theme = "mycolors2"] .hljs-class .hljs-title {
      color: #c18401;
    }
    
    [data-theme = "mycolors2"] .hljs-emphasis {
      font-style: italic;
    }
    
    [data-theme = "mycolors2"] .hljs-strong {
      font-weight: bold;
    }
    
    [data-theme = "mycolors2"] .hljs-link {
      text-decoration: underline;
    }
    
    
    .hljs {
      color: #abb2bf;
      background: #282c34;
    }
    
    .hljs-comment,
    .hljs-quote {
      color: #5c6370;
      font-style: italic;
    }
    
    .hljs-doctag,
    .hljs-keyword,
    .hljs-formula {
      color: #c678dd;
    }
    
    .hljs-section,
    .hljs-name,
    .hljs-selector-tag,
    .hljs-deletion,
    .hljs-subst {
      color: #e06c75;
    }
    
    .hljs-literal {
      color: #56b6c2;
    }
    
    .hljs-string,
    .hljs-regexp,
    .hljs-addition,
    .hljs-attribute,
    .hljs-meta .hljs-string {
      color: #98c379;
    }
    
    .hljs-attr,
    .hljs-variable,
    .hljs-template-variable,
    .hljs-type,
    .hljs-selector-class,
    .hljs-selector-attr,
    .hljs-selector-pseudo,
    .hljs-number {
      color: #d19a66;
    }
    
    .hljs-symbol,
    .hljs-bullet,
    .hljs-link,
    .hljs-meta,
    .hljs-selector-id,
    .hljs-title {
      color: #61aeee;
    }
    
    .hljs-built_in,
    .hljs-title.class_,
    .hljs-class .hljs-title {
      color: #e6c07b;
    }
    
    .hljs-emphasis {
      font-style: italic;
    }
    
    .hljs-strong {
      font-weight: bold;
    }
    
    .hljs-link {
      text-decoration: underline;
    }

    <!doctype html>
    <html lang = "en">
        <head>
            <meta charset = "utf-8">
            <meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
            <title>reveal.js</title>
    
            <link rel = "stylesheet" href = "dist/reset.css">
            <link rel = "stylesheet" href = "dist/reveal.css">
            <link rel = "stylesheet" href = "dist/theme/black.css">
    
            <!-- Theme used for syntax highlighted code -->
            <link rel = "stylesheet" href = "plugin/highlight/mycolors.css">
        </head>
        <body>
            <div class = "reveal">
                <div class = "slides">
                <section >
                    <pre data-id = "code" data-theme = "mycolors"><code>
                        println("dark color code is fine here.")
                    </code></pre>
                    <pre data-id = "code" data-theme = "mycolors2"><code>
                        println("light color code is fine here.")
                    </code></pre>
                </section>
                </div>
            </div>
    
            <script src = "dist/reveal.js"></script>
            <script src = "plugin/notes/notes.js"></script>
            <script src = "plugin/markdown/markdown.js"></script>
            <script src = "plugin/highlight/highlight.js"></script>
            <script>
                // More info about initialization & config:
                // - https://revealjs.com/initialization/
                // - https://revealjs.com/config/
                Reveal.initialize({
                    hash: true,
    
                    // Learn about plugins: https://revealjs.com/plugins/
                    plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
                });
            </script>
        </body>
    </html>

прочитайте вопрос с моим обновлением. спасибо

— 02.04.2023 08:51

@Woeitg, тебе не хватает ПРОБЕЛОВ

— 02.04.2023 10:06

Где именно я пропускаю пробелы? Можете ли вы отредактировать вопрос, чтобы исправить это?

— 02.04.2023 10:19

@Woeitg [data-theme = "monokai"].hljs означает «эль с классом 'hljs' И атрибутом data-theme = 'monokai'», в то время как вам нужно [data-theme = "monokai"] .hljs, что означает «эль с классом 'hljs' ЯВЛЯЕТСЯ ДОчерним элементом el с атрибутом data-theme = 'monokai'"

— 02.04.2023 10:28

Спасибо. теперь я пытаюсь исправить и запустить его.

— 02.04.2023 10:29

02.04.2023 00:52