function shikiHighlightBlock(html, shiki, props) {
    let htmlString = html;

    const lines = htmlString.split('\n');

    // Remove empty lines from the start
    while (lines.length > 0 && lines[0].trim() === '') {
        lines.shift();
    }

    if (lines.length < 1)
        return '';

    const indentationSpaces = lines[lines.length - 1].split(' ').length - 1;

    const title = props.title;
    const language = props.lang;
    const highlightIndexes = getIndexes(props.highlight || '');
    const focusIndexes = getIndexes(props.focus || '');
    const showLineNumbers = props.showLineNumbers;
    const isDetails = props.isDetails;

    const shouldHighlightLines = Object.keys(highlightIndexes).length > 0;
    const shouldFocusLines = Object.keys(focusIndexes).length > 0;

    /**
     * code content
     */
    let body = lines;

    /**
     * Fixed indentation and replace '\r' with '\n'
     */
    let bodyCleaned = body.map(row => {
        const emptyRow = row.trim() === '';

        if (emptyRow)
            row = '';

        return (!emptyRow && row.slice(0, indentationSpaces).trim() === ''
            ? row.slice(indentationSpaces)
            : row).replace('\r', '');

    }).join('\n');

    /**
     * Number of lines of code
     */
    const nRows = body.length;

    /**
     * Html string for line numbers
     */
    let lineNumbers = '';

    if (showLineNumbers) {
        lineNumbers = '<div class="hl__numbers" aria-hidden="true">';

        for (let i=1; i<=nRows; i++) {
            const className = [];

            if (shouldFocusLines && focusIndexes[i] === true)
                className.push('line--focus');

            if (shouldHighlightLines && highlightIndexes[i] === true)
                className.push('line--highlight');

            lineNumbers += `<span class="${className.join(' ')}"></span>`;
        }

        lineNumbers += '</div>';
    }

    const preHtml = shiki.codeToHtml(bodyCleaned, {
        lang: language,
        theme: SHIKI_THEME,
        transformers: [
            {
                line: (Element, index) => {
                    let className = 'line';

                    if (shouldFocusLines && focusIndexes[index])
                        className += ' line--focus';

                    Element.properties['class'] = className;
                },
                postprocess: (html) => {
                    return html.replaceAll('{{latest_release}}', '<span data-latest-release></span>');
                }
            }
        ]
    });

    const tag = title && isDetails
        ? 'details'
        : 'div';

    const titleTag = title && isDetails
        ? 'summary'
        : 'div';

    const className = `hl hl--${tag}`
        + (showLineNumbers ? ' hl--line-numbers' : '')
        + (shouldFocusLines ? ' hl--line-focus' : '');

    const renderedCodeBlock = `
    <${tag}
        class="${className}"
    >
        ${title
            ? `<${titleTag} class="hl__title">${title.trim()}</${titleTag}>`
            : ''
        }
        <div class="hl__content">
            ${preHtml}
            ${showLineNumbers ? lineNumbers : ''}
        </div>
    </${tag}>`;

    return renderedCodeBlock;
}
@param {string} html
@param {import('shiki').Highlighter} shiki
@param {ShikiBlockProps} props