lijyze
June 5, 2022, 10:25am
1
In preview mode, code blocks and plugins play well, but when export to PDF, code blocks somehow lost additional powers.
I’m trying to extend build-in prism.js with its official plugin, I think shouldn’t the other functionality work too If highlighting works?
After lots of test, I found something wired.
Let me explain this with an example.
This is what the code block look like at the begining.
This is my post processor
This is the code block in preview mode
And this is the code block has exported to pdf
The ‘Method 1’ disappeared!!!
I’m not sure if it is a bug, anyone get some clues to handle this?
Export to PDF seems overall inconsistent with post processor:
registerMarkdownPostProcessor behaves inconsistently between reader mode/live preview and print view, instead of passing the individual markdown rendered elements as el, in print view the entire page is passed.
this.registerMarkdownPostProcessor(async (el) => document.querySelector('table') ? console.log(el.outerHTML) : '');
Example note:
# Test header
| test | table |
| ---- | ----- |
| test | cells |
Output in live preview:
<div class="markdown-rendered show-indentation-guide" style="overflow-x: auto;"><table>
<thead>
<tr>
<th>test</th>
<th>table</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>cells</td>
</tr>
</tbody>
</table></div>
Output in reader mode
<div style="overflow-x: auto;"><table>
<thead>
<tr>
<th>test</th>
<th>table</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>cells</td>
</tr>
</tbody>
</table></div>
Which are both as expected, but in export to pdf mode instead of just the rendered div, the entire page is passed:
Export as PDF:
<div class="markdown-preview-view markdown-rendered"><h1 data-heading="Test header">Test header</h1>
<table>
<thead>
<tr>
<th>test</th>
<th>table</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>cells</td>
</tr>
</tbody>
</table></div>
