xyhp915 / logseq-fenced-code-plus

A Logseq plugin for missing types of fenced code 🚀
MIT License
108 stars 17 forks source link

support svg code blocks #53

Closed cannibalox closed 1 month ago

cannibalox commented 1 month ago

would be nice to render svg code blocks like

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
  <path d="M 50 150 Q 150 50 250 150" stroke="blue" fill="none" stroke-width="2"/>
  <line x1="20" y1="180" x2="280" y2="180" stroke="black"/>
  <line x1="50" y1="20" x2="50" y2="180" stroke="black"/>
  <line x1="100" y1="20" x2="100" y2="180" stroke="red" stroke-width="2"/>
  <circle cx="150" cy="100" r="3" fill="red"/>
  <text x="290" y="185" font-size="12">x</text>
  <text x="40" y="15" font-size="12">y</text>
  <text x="155" y="105" font-size="12" fill="red">P</text>
  <text x="105" y="185" font-size="12" fill="red">Tangente</text>
</svg>

it can be done using /html/@@html: but user has to minify the code as /html slash command doesn't support line breaks.

xyhp915 commented 1 month ago

Hi @cannibalox Supported with htmlmixed mode!

https://github.com/xyhp915/logseq-fenced-code-plus/releases/tag/0.0.11

```htmlmixed
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
  <path d="M 50 150 Q 150 50 250 150" stroke="blue" fill="none" stroke-width="2"/>
  <line x1="20" y1="180" x2="280" y2="180" stroke="black"/>
  <line x1="50" y1="20" x2="50" y2="180" stroke="black"/>
  <line x1="100" y1="20" x2="100" y2="180" stroke="red" stroke-width="2"/>
  <circle cx="150" cy="100" r="3" fill="red"/>
  <text x="290" y="185" font-size="12">x</text>
  <text x="40" y="15" font-size="12">y</text>
  <text x="155" y="105" font-size="12" fill="red">P</text>
  <text x="105" y="185" font-size="12" fill="red">Tangente</text>
</svg>```
cannibalox commented 3 weeks ago

thanks, it's working great !