Блог

Главная - Вопросы по программированию - reveal.js увеличение размера номера слайда в Reveal.initialize() без css

reveal.js увеличение размера номера слайда в Reveal.initialize() без css

#css #font-size #reveal.js

Вопрос:

Я хочу увеличить размер номеров слайдов в reveal.js.

Я могу изменить размер шрифта в своем локальном css-файле по адресу reveal.js/dist/reveal.css , но это изменит шрифт для всех моих презентаций. Кроме того, там нелегко работать с однострочным css-файлом. Есть ли способ сделать это непосредственно при инициализации?

Я вижу на https://revealjs.com/slide-numbers/ что я также мог бы добавить номер слайда в пользовательском формате, но попытка выполнить следующее не работает:

                 slideNumber: slide => {
                        // Ignore numbering of vertical slides
                        return [
                        Reveal.getIndices( slide ).h
                        Reveal.getIndices( slide ).v
                        ];
                    }

Вот пример того, как моя презентация создается в формате html:

 <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

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

        <title>Final presentation</title>

        <meta name="description" content="MSc. Thesis progress meeting">
        <meta name="author" content="Wolke Wanderer">

        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="reveal.js/dist/reset.css">
        <link rel="stylesheet" href="reveal.js/dist/reveal.css">
        <link rel="stylesheet" href="reveal.js/dist/theme/white.css" id="theme">

        <!-- Theme used for syntax highlighting of code -->
        <link rel="stylesheet" href="reveal.js/plugin/highlight/monokai.css" id="highlight-theme">
    </head>
<body>

<div class="reveal">

            <!-- Any section element inside of this container is displayed as a slide -->
            <div class="slides">
                <section>
                    <h2>Test title</h2>
                    <p>I want big slide numbers for a presentation in a lecture hall</p>
                </section>
            </div>

</div>

        <script src="reveal.js/dist/reveal.js"></script>
        <script src="reveal.js/plugin/zoom/zoom.js"></script>
        <script src="reveal.js/plugin/notes/notes.js"></script>
        <script src="reveal.js/plugin/search/search.js"></script>
        <script src="reveal.js/plugin/markdown/markdown.js"></script>
        <script src="reveal.js/plugin/highlight/highlight.js"></script>
        <script src="reveal.js/plugin/math/math.js"></script>

        <script>
            let notes = document.querySelectorAll('aside.notes');
                notes.forEach(n => {
                let html = n.innerHTML;
                html = html.trim().replace(/n/g, '<br/>');
                n.innerHTML = html;
            });

            // Also available as an ES module, see:
            // https://revealjs.com/initialization/
            Reveal.initialize({
                controls: true,
                controlsBackArrows: 'faded',
                progress: true,
                center: true,
                hash: true,
                autoPlayMedia: true,
                totalTime: 1800,
                minimumTimePerSlide: 30,
                transition: 'slide',
                showHiddenSlides: true,
                slideNumber: true,

                math: {
                    // mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
                    config: 'TeX-AMS_HTML-full',
                    TeX: {
                        Macros: {
                            R: '\mathbb{R}',
                            set: [ '\left\{#1 \; ; \; #2\right\}', 2 ]
                        }
                    }
                },

                // Learn about plugins: https://revealjs.com/plugins/
                plugins: [ RevealMath, RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight ]
            });

        </script>
</body>


</html>
Метки: