Add slide mode with reveal.js

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2021-10-04 12:50:39 +02:00
parent 29565f8f89
commit 36e445e631
70 changed files with 1225 additions and 323 deletions

View file

@ -11,6 +11,8 @@
@import '../../../../../../node_modules/highlight.js/styles/github-dark';
}
position: relative;
code.hljs {
overflow-x: auto;
background-color: rgba(27, 31, 35, .05);
@ -50,10 +52,10 @@
.linenumber {
display: flex;
}
}
&.showGutter .codeline {
margin: 0 0 0 16px;
.codeline {
margin: 0 0 0 16px;
}
}
&.wrapLines .codeline {

View file

@ -18,13 +18,13 @@ export type LineNumberMarkerOptions = (lineMarkers: LineMarkers[]) => void
* This plugin adds markers to the dom, that are used to map line numbers to dom elements.
* It also provides a list of line numbers for the top level dom elements.
*/
export const lineNumberMarker: (options: LineNumberMarkerOptions, offsetLines: number) => MarkdownIt.PluginSimple =
(options, offsetLines = 0) =>
export const lineNumberMarker: (options: LineNumberMarkerOptions, lineOffset: number) => MarkdownIt.PluginSimple =
(options, lineOffset = 0) =>
(md: MarkdownIt) => {
// add app_linemarker token before each opening or self-closing level-0 tag
md.core.ruler.push('line_number_marker', (state) => {
const lineMarkers: LineMarkers[] = []
tagTokens(state.tokens, lineMarkers, offsetLines)
tagTokens(state.tokens, lineMarkers, lineOffset)
if (options) {
options(lineMarkers)
}
@ -57,7 +57,7 @@ export const lineNumberMarker: (options: LineNumberMarkerOptions, offsetLines: n
tokens.splice(tokenPosition, 0, startToken)
}
const tagTokens = (tokens: Token[], lineMarkers: LineMarkers[], offsetLines: number) => {
const tagTokens = (tokens: Token[], lineMarkers: LineMarkers[], lineOffset: number) => {
for (let tokenPosition = 0; tokenPosition < tokens.length; tokenPosition++) {
const token = tokens[tokenPosition]
if (token.hidden) {
@ -72,14 +72,14 @@ export const lineNumberMarker: (options: LineNumberMarkerOptions, offsetLines: n
const endLineNumber = token.map[1] + 1
if (token.level === 0) {
lineMarkers.push({ startLine: startLineNumber + offsetLines, endLine: endLineNumber + offsetLines })
lineMarkers.push({ startLine: startLineNumber + lineOffset, endLine: endLineNumber + lineOffset })
}
insertNewLineMarker(startLineNumber, endLineNumber, tokenPosition, token.level, tokens)
tokenPosition += 1
if (token.children) {
tagTokens(token.children, lineMarkers, offsetLines)
tagTokens(token.children, lineMarkers, lineOffset)
}
}
}

View file

@ -66,7 +66,7 @@ export const MarkmapFrame: React.FC<MarkmapFrameProps> = ({ code }) => {
}, [code])
return (
<div data-cy={'markmap'}>
<div data-cy={'markmap'} className={'position-relative'}>
<div className={'svg-container'} ref={diagramContainer} />
<div className={'text-right button-inside'}>
<LockButton