reveal.js 相关问题

在 reveal.js 中，我怎么能有两种代码颜色，假设一种是浅色，另一种是深色。这是一个有两个颜色代码的代码，我想将第二个颜色代码更改为光：在 reveal.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> 要将第二段代码中的颜色改为浅色，可以在第二个pre元素中添加一个新的class，然后在CSS文件中添加相应的样式即可。首先，给第二个pre元素添加一个新类，像这样： <pre data-id="code" class="light-code"><code> println("I want light color code here.") </code></pre> 然后，将 light-code 类的样式添加到 CSS 文件中，如下所示： /* For the light-code class */ .light-code code { background-color: #f8f8f8; color: #333; } 在此示例中，背景颜色设置为浅灰色 (#f8f8f8)，文本颜色设置为深灰色 (#333)。您可以根据需要调整这些值以达到所需的效果。请注意，您需要在 HTML 文档中加载修改后的 CSS 文件才能应用新样式。 reveal.js 使用 highlight.js 来高亮代码块。目前，没有开箱即用的页面内有多个主题的选项。你可以做的是使用 shadow DOM 来隔离代码和样式作为 hacky 解决方案。这就是现代 JS 框架在幕后所做的事情。这只是一个简单的示例，说明如何将 shadow DOM 与 highlight.js 一起使用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Shadow DOM with highlight.js</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script> </head> <body> <h1>Shadow DOM with highlight.js</h1> <div id="dark"></div> <div id="light"></div> <script> const addCodeBlock = (root, code, style) => { const shadowRoot = root.attachShadow({mode: 'open'}); const codeBlock = document.createElement('pre'); const codeElem = document.createElement('code'); codeElem.innerText = code; codeElem.classList.add('javascript'); codeBlock.appendChild(codeElem); shadowRoot.appendChild(codeBlock); const link = document.createElement('link'); link.setAttribute('rel', 'stylesheet'); link.setAttribute('href', style); shadowRoot.appendChild(link); hljs.highlightBlock(codeElem); }; addCodeBlock(document.getElementById('light'), 'console.log("Hello, world!");', 'https://highlightjs.org/static/demo/styles/atom-one-light.css'); addCodeBlock(document.getElementById('dark'), 'console.log("Hello, world!!!");', 'https://highlightjs.org/static/demo/styles/atom-one-dark.css'); </script> </body> </html>

javascript html css reveal.js

回答 2 投票 0

revealjs Quarto 中的项目符号点之间没有项目符号点

我希望在 Quarto 的 revealjs 演示文稿中的要点之间没有要点。这是一些可重现的代码： --- 标题：“Quato&qu...中的项目符号点之间没有项目符号点...

reveal.js quarto

回答 1 投票 0

如何添加隐藏在呈现的四开本 revealjs 演示文稿中的评论

有没有办法向四开本 Revealjs 演示文稿添加隐藏在演示文稿中的评论？通常在 R 中，我们使用 # 来注释代码，以便我们可以跟踪我们在做什么。然而……

reveal.js quarto

回答 1 投票 0

reveal.js 如何在幻灯片中添加图片

我正试图在我的演示文稿中使用reveal.js。我试图在我的幻灯片中添加一张图片，但图片无法显示。以下是我的代码幻灯片页眉