Reveal.js: Fügen Sie Fragmente innerhalb des Codes hinzu
Ich habe eine Präsentation, die mit reveal.js läuft und alles funktioniert. Ich schreibe einen Beispielcode und highlight.js funktioniert gut in meiner Präsentation. Aber ich möchte Code inkrementell anzeigen. Stellen Sie sich zum Beispiel vor, dass ich Ihnen eine Funktion erläutere, und ich zeige Ihnen den ersten Schritt und möchte dann die folgenden Schritte zeigen. Normalerweise würde ich Fragmente verwenden, um Elemente inkrementell anzuzeigen, aber es funktioniert nicht in einem Codeblock.
Ich habe also so etwas:
%Vor% Aber die <span> -Elemente werden Syntax-hervorgehoben, anstatt als HTML-Fragmente gelesen zu werden. Es sieht ungefähr so aus: Ссылка
FYI ohne die <span> -Elemente highlight.js liest dies korrekt als Python, aber mit der <span> ist die erkannte Sprache coffeescript.
Jede Idee, wie man Fragmente in einem Codeblock hat (oder eine andere Art, dies zu simulieren) wäre sehr willkommen.
3 Antworten
Ich habe das zur Arbeit gebracht. Ich musste die Init für die highlight.js-Abhängigkeit ändern:
%Vor%Dann habe ich den Abschnitt auf diese Weise erstellt:
%Vor% Ergebnisse:
Damit Fragmente in Code-Snippets funktionieren, können Sie jetzt das Attribut data-noescape mit dem <code> -Tag
Quelle: Reveal.js-Dokumentation
Ich würde versuchen, mehrere <pre class="fragment"> zu verwenden und manuell .reveal pre auf margin: 0 auto; und box-shadow: none; zu ändern, damit sie wie ein Codeblock aussehen.
ODER
Hast du <code class="fragment"> ausprobiert? Wenn Sie einen negativen vertikalen Rand verwenden, um den Abstand zwischen einzelnen Fragmenten zu entfernen und den gleichen Hintergrund zu <pre> hinzufügen, wie in <code> , dann erhalten Sie, was Sie wollen.
Ergebnis:
Tags und Links reveal.js highlight.js