Callout icons aren't printed #1

New Issue

Vojta · 2025-06-08T21:00:08Z

Vojta commented

2025-06-08 21:00:08 +00:00

The remark-github-alerts plugin I'm using creates the little icon via CSS, by supplying a variable with data:... payload through a in-line style. Print exporters in browser don't seem to support it (not Safari and not Chrome at least)

Instead something like inline svg or image would be better for prints. Like gitea does:

Note

This will print no problem

The [`remark-github-alerts`](https://github.com/hyoban/remark-github-alerts) plugin I'm using creates the little icon via CSS, by supplying a variable with `data:...` payload through a in-line style. Print exporters in browser don't seem to support it (not Safari and not Chrome at least) Instead something like inline svg or image would be better for prints. Like gitea does: > [!NOTE] > This will print no problem

Vojta added the

print

label 2025-06-08 21:08:32 +00:00

Vojta referenced this issue from a commit

2025-06-09 19:02:10 +00:00

Use images for github callout icons #1

Vojta commented

2025-06-09 19:06:47 +00:00

I've added the SVGs as images to the project. Lifted them directly from the remark plugin for github callouts. I had to add the xmlns attribute or else they wouldn't render at all. I didn't have the nerve to assemble the svg in the rehype plugin, so I made them into tiny images.

I also embedded the colors directly in the SVGs. So that's hardcoded now. Inline SVG would be better.

You can force the rehype plugins to run with the --force flag.

npm run build --force

otherwise, the content is cached.

I've added the SVGs as images to the project. Lifted them directly from the remark plugin for github callouts. I had to add the `xmlns` attribute or else they wouldn't render at all. I didn't have the nerve to assemble the svg in the rehype plugin, so I made them into tiny images. I also embedded the colors directly in the SVGs. So that's hardcoded now. Inline SVG would be better. You can force the rehype plugins to run with the `--force` flag. ``` npm run build --force ``` otherwise, the content is cached.

Vojta closed this issue

2025-06-09 19:06:57 +00:00

Sign in to join this conversation.

No Label

print

No Milestone

No project

No Assignees

1 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: Vojta/fi-notes#1