Custom SVG's

[HippyCraig]

So this isnt an issue more a question. Is there a way to add other images to the list in main.js? It looks to be just adding some of the SVG content on one line formating wise. If this is acceptable, what would happen as new version are released? Is there a better way to do this instead of modding the main.js directly in my plugins folder?

[mugiwara85]

You definitely shouldn't modify the main.js. But I am a little confused. What would you like to achieve? What is your goal?

[HippyCraig]

So some of the types that I use are missing from the list, and for those that dont have icons I may have some to fill in, I thought maybe there was a seperate file for custom stuff that would overide some of the values if there in a custom CSS or something like that.

[mugiwara85]

I'm happy to add them if you'd like :) That would be the easiest way probably

[HippyCraig]

ok cool thanks, will there be some way in the future to add your own, like in some sort of CSS. Kind of like how you can currently do this with Callouts, something like below. They expose some variables so you can override whats currently there

.callout[data-callout="reference-material"] {
    --callout-title-color: var(--callout-type-basic-darkcolor);
    --callout-color: var(--callout-type-basic-lightcolor);
    --callout-icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 25px; width: 25px;"><g class="" transform="matrix(1.0887 0 0 1.0887 -27.217 -62.055)">   <path fill="var(--callout-title-color)" d="m169 57v430h78v-430zm-144 48v190h46v-190zm158 23h18v320h-18zm128.72 7.69-45.276 8.124 61.825 344.5 45.276-8.124zm-222.72 17.31v270h62v-270zm281.5 28.68-27.594 11.773 5.494 12.877 27.594-11.773zm12.56 29.433-27.597 11.772 5.494 12.877 27.593-11.772-5.492-12.877zm12.555 29.434-27.594 11.77 99.674 233.63 27.594-11.773-99.673-233.62zm-370.62 72.453v30h46v-30zm190 7h18v128h-18zm-190 41v126h46v-126zm64 80v46h62v-46z"/>  </g>     </svg>;
}

[mugiwara85]

You'll have to send me those icons, you'd like to include. Also, I still don't understand what you'd like to achieve. Maybe explaining it, would help?

[HippyCraig]

Attached is the ZIP of some of them, I am still working on more. So in the css example above I have a bunch of these with differnt callout values. I put this CSS in ".obsidian\snippets" folder in my vault. Now when ever I create a callout and use one of these names, for example "[data-callout="reference-material"]" it will use this style sheet format the colors and SVG that is displayed. I can create as many as I want in as long as they have unique names.

callout.txt should be renamed to callout.css I couldnt attach it with the .css extention.

callout.txt NewSVG.zip

[HippyCraig]

did the file come through ok?

[mugiwara85]

Yeah, I got them. Unfortunately, I didn't had time to look at it, because I had some critical work. But during this week, or at weekand I definitely will.

[HippyCraig]

no rush, I just wnated to make sure the files were ok

[mugiwara85]

Hi @HippyCraig, sorry for the delay. I pushed a modification. It is not yet released so you'll have to take the main.js and overwrite your own (after backing up of course) with it.

After that in your VaultFolder/plugins/codeblock-customizer/customSVG/ create aa file called svg.json with similar content:

{  
  "Languages": {  
    "abc": "ABC Language2"  
  }  
}  

Here abc is the language you'll type into a codeblock as a language, and ABC Language2 is the display text for that specific language. You can add as many as you'd like (dont forget to add comma to the end of each line except the last one). After that you can add your SVGs. The file name of the svg if the displayname of the language, so in the previous example it would be ABC Language2.svg.

Important!: The content of the svg file should be WITHOUT the SVG tag. For example, like this:

<path d="M29.472,14.753,17.247,2.528a1.8,1.8,0,0,0-2.55,0L12.158,5.067l3.22,3.22a2.141,2.141,0,0,1,2.712,2.73l3.1,3.1a2.143,2.143,0,1,1-1.285,1.21l-2.895-2.895v7.617a2.141,2.141,0,1,1-1.764-.062V12.3a2.146,2.146,0,0,1-1.165-2.814L10.911,6.314,2.528,14.7a1.8,1.8,0,0,0,0,2.551L14.753,29.472a1.8,1.8,0,0,0,2.55,0L29.472,17.3a1.8,1.8,0,0,0,0-2.551" style="fill:#dd4c35"/><path d="M12.158,5.067l3.22,3.22a2.141,2.141,0,0,1,2.712,2.73l3.1,3.1a2.143,2.143,0,1,1-1.285,1.21l-2.895-2.895v7.617a2.141,2.141,0,1,1-1.764-.062V12.3a2.146,2.146,0,0,1-1.165-2.814L10.911,6.314" style="fill:#fff"/>

Please test it, and give me a feedback!

P.S.: I think that is enough customization. Or is there a specific case you'd need some CSS variables?

[HippyCraig]

I will give that a try, I just returned from vacation so I will need a day or two. Im very excited to try this!!!

[mugiwara85]

No rush. Take your time :) If something is not clear, just ask.

[HippyCraig]

I am having some issues getting this to work, in the example below

In my md file I put with ``` around it abc title:"Example" Get-Contents Get-Contents Get-Contents Get-Contents

svg.json: {
"Languages": {
"abc": "ABC Language2" } }

I created an SVG file called ABC Language2.svg and removed opening and ending tags for the SVG and just left the path statements When it renders I get the following

[mugiwara85]

Can you send me the ABC Language2.svg file itself?

[HippyCraig]

[mugiwara85]

The svg.json looks ok, but the svg doesn't. This is an inkscape svg format. You need to convert that to a plain svg format. On you picture it looks like it didn't even load it. Did you put the files in the correct folder?

Note: First you need to edit the svg.json file, and put svgs in the folder, and start/restart Obsidian to load it.

[HippyCraig]

Ok so I reviewed the contents of the file and found anohter SVG to replace the sample above, its supposed to be a Ranch Longhorn symbol. I also change the json file to use line feed instead of carriage return line feed as the line terminator, its formated in utf-8 (No BOM). But I sill get the same output even on restarting Obsidian. Attached are the new files I added.

svg.json

When editing the actual svg I do you inkscape but I save the file as Optimized

Before removing any of the SVG tags as sugested should hte view port be set to something specific first before manually removing it from the file? Should they be set to 24 x 24 before saving the output and

<svg width="181.76" height="181.76" version="1.1" viewBox="0 0 181.76 181.76" xmlns="http://www.w3.org/2000/svg">

Should they be set to 24 x 24 before saving the output and as optomized?

Below is a sample of what the orginal file looks like:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="181.76" height="181.76" version="1.1" viewBox="0 0 181.76 181.76" xmlns="http://www.w3.org/2000/svg">
 <rect x="2.6745" y="2.6745" width="176.57" height="176.57" ry="30.917" fill="#5f224a"/>
 <path d="m85.573 139.5c ........  0.48l2.4495-0.0935z" fill="#fff" stroke-width=".32"/>
</svg>

So in the sample above I would keep line with "<rect " and "<path", Remove the other lines completly and put two that remain on the same line and save it to the directory.

<rect x="2.6745" y="2.6745" width="176.57" height="176.57" ry="30.917" fill="#5f224a"/><path d="m85.573 139.5c-5.8127-1.5335-10.83-6.131-12.796-11.726-0.34581-0.9839-0.98753-4.1421-1.426-7.0183-1.1622-7.6229-4.9544-30.757-5.0533-30.827-0.04645-0.0331-8.9405-1.825-19.764-3.9819-10.824-2.1569-20.161-4.1218-20.748-4.3664-1.745-0.72647-3.3873-2.2218-4.3176-3.9311-0.74022-1.36-1.0695-2.911-2.1622-10.184-0.70894-4.7185-1.2882-9.3989-1.2872-10.401 0.0047-4.862 4.1576-8.8983 9.1553-8.8983 2.5611 0 4.5658 0.84406 6.4284 2.7067 2.014 2.014 2.4336 3.22 3.3443 9.6133 0.37607 2.64 0.70706 4.8222 0.73553 4.8494 0.02848 0.0272 12.399 2.5186 27.491 5.5363l27.439 5.4869 54.948-10.989 0.6941-4.8849c0.89686-6.3118 1.3437-7.5838 3.3796-9.6196 3.6617-3.6617 9.18-3.6617 12.842 0 1.8534 1.8534 2.7028 3.8717 2.6926 6.3979-0.0117 2.8692-2.4435 18.242-3.1319 19.799-0.81006 1.8313-2.9065 3.8782-4.6401 4.5305-0.73774 0.27758-9.9672 2.2281-20.51 4.3346-10.543 2.1064-19.227 3.8886-19.299 3.9604s-1.4927 7.742-3.1574 17.045c-1.6648 9.3028-3.2422 17.85-3.5053 18.994-1.4895 6.4754-6.8698 11.927-13.417 13.594-2.5502 0.64949-11.443 0.63627-13.933-0.0207zm11.882-31.654c1.3767-7.568 2.5064-13.849 2.5105-13.958 0.0041-0.10884-1.2525 0.0655-2.7925 0.38739-3.4838 0.72822-5.4112 0.7512-8.5506 0.10198-1.3525-0.2797-2.5439-0.42366-2.6476-0.31992-0.10374 0.10374 0.77316 6.1286 1.9487 13.389 1.1755 7.26 2.1355 13.458 2.1334 13.773-0.0035 0.50975 0.26826 0.56308 2.4456 0.48l2.4495-0.0935z" fill="#fff" stroke-width=".32"/>

[HippyCraig]

I was able to get the source thats output but its not showing any of the SVG info from my abc.cvg file. just some cheveron image.

<div class="codeblock-customizer-pre-parent">
  <pre
    class="language-abc codeblock-customizer-pre codeblock-customizer-language-abc"
    tabindex="0"><div class="codeblock-customizer-header-container-specific codeblock-customizer-language-abc"><div class="codeblock-customizer-header-language-tag">Abc</div><div class="codeblock-customizer-header-text">Example</div><div class="codeblock-customizer-header-collapse"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></div></div><code class="is-loaded language-abc test"><div class="codeblock-customizer-line" indentlevel="0"><div class="codeblock-customizer-line-number"><span class="codeblock-customizer-line-number-element">1</span></div><div class="codeblock-customizer-line-text">Get-Contents</div></div><div class="codeblock-customizer-line" indentlevel="0"><div class="codeblock-customizer-line-number"><span class="codeblock-customizer-line-number-element">2</span></div><div class="codeblock-customizer-line-text">Get-Contents</div></div><div class="codeblock-customizer-line" indentlevel="0"><div class="codeblock-customizer-line-number"><span class="codeblock-customizer-line-number-element">3</span></div><div class="codeblock-customizer-line-text">Get-Contents</div></div><div class="codeblock-customizer-line" indentlevel="0"><div class="codeblock-customizer-line-number"><span class="codeblock-customizer-line-number-element">4</span></div><div class="codeblock-customizer-line-text">Get-Contents</div></div></code><button class="copy-code-button">Copy</button><button class="codeblock-customizer-copy-code-button" aria-label="Copy code">Abc</button></pre>
</div>

[mugiwara85]

Save the file as Plain SVG (2nd option). Does it work that way?

[HippyCraig]

Non of it is working I tried savign in diff formats, trimming them different ways nothing is makeing it in. can you post a working SVG that you use so I can compare it to what I have?

[mugiwara85]

I already did here: Does this work for you?

Hi @HippyCraig, sorry for the delay. I pushed a modification. It is not yet released so you'll have to take the main.js and overwrite your own (after backing up of course) with it.

After that in your VaultFolder/plugins/codeblock-customizer/customSVG/ create aa file called svg.json with similar content:

{  
  "Languages": {  
    "abc": "ABC Language2"  
  }  
}  

Here abc is the language you'll type into a codeblock as a language, and ABC Language2 is the display text for that specific language. You can add as many as you'd like (dont forget to add comma to the end of each line except the last one). After that you can add your SVGs. The file name of the svg if the displayname of the language, so in the previous example it would be ABC Language2.svg.

Important!: The content of the svg file should be WITHOUT the SVG tag. For example, like this:

<path d="M29.472,14.753,17.247,2.528a1.8,1.8,0,0,0-2.55,0L12.158,5.067l3.22,3.22a2.141,2.141,0,0,1,2.712,2.73l3.1,3.1a2.143,2.143,0,1,1-1.285,1.21l-2.895-2.895v7.617a2.141,2.141,0,1,1-1.764-.062V12.3a2.146,2.146,0,0,1-1.165-2.814L10.911,6.314,2.528,14.7a1.8,1.8,0,0,0,0,2.551L14.753,29.472a1.8,1.8,0,0,0,2.55,0L29.472,17.3a1.8,1.8,0,0,0,0-2.551" style="fill:#dd4c35"/><path d="M12.158,5.067l3.22,3.22a2.141,2.141,0,0,1,2.712,2.73l3.1,3.1a2.143,2.143,0,1,1-1.285,1.21l-2.895-2.895v7.617a2.141,2.141,0,1,1-1.764-.062V12.3a2.146,2.146,0,0,1-1.165-2.814L10.911,6.314" style="fill:#fff"/>

Please test it, and give me a feedback!

P.S.: I think that is enough customization. Or is there a specific case you'd need some CSS variables?

[HippyCraig]

Thanks I did not see at first that was a whole file, but regardless its not working Its a single line file

[mugiwara85]

Did you put the files in the correct folder?

[HippyCraig]

Yea I missed that too. Sorry now it seems to be working. Thanks for getting this in.

one more request Can another key value pair be added to that json file per entry that says language: powershell for example. I want to add iRule to my notes but it uses the standard tcl language and I would like to use that for formatting of the code. And possible any others that supported in obsidian

if the value is none then no format would be used

and sorry for missing all those other steps you did write clear directions work has caused me a lot of context switching and I missed a lot

[mugiwara85]

No problem. Sorry, I am not quite sure what would you like to me to do. Can you show an example?

[HippyCraig]

I was thinking of something like this

{
  "Languages": {
    "Language": [
      {
        "language name": ["irule", "iRule", "IRULE"],
        "display name": "iRule",
        "svg file": "iRule.svg",
        "language format": "tcl"
      },
      {
        "language name": "dockerfile",
        "display name": "Docker File",
        "svg file": "Docker File.svg",
        "language format": "yaml"
      },
      {
        "language name": "randomlang",
        "display name": "Random Language",
        "svg file": "Random Language.svg",
        "language format": "none"
      }
    ]
  }
}

The language format would be an existing format type native to obsidian and I think it uses Prism. If one of these happen to match. Like in the first example iRule uses TLC formating. If one doesnt exist you can put "none" and no formating would take place.

Also like in the same iRule example I wasnt sure if there was any type of case sensativity, so thats why theres mutiple values. If its case insensative then just all lowercase would be work. Just not sure how the end user would use it in MD.

I hope this explains it a little more. I try to put code sample is for all kinds of languages, and custom tooling in my notes all the time.

Sorry I wasnt trying to over complicate things, just though it would make it a little cooler and more flexable. :)

[HippyCraig]

Does the above make sense sometimes I wonder if I over explain things LOL

[mugiwara85]

Not sure I follow. If your concern is the format I can change it to:

"language name": "dockerfile",
"display name": "Docker File",
"svg file": "Docker File.svg",

The reason I did it the way I did is, because if you look at https://github.com/mugiwara85/CodeblockCustomizer/blob/master/src/Const.ts then you can see that it is the same format. So I didn't had to change much on the code to adapt this feature.

Obsidian does use Prism but only in reading mode. In editing mode, it uses something else (I forgot the name).

Regarding your language format question: You want to define the language itself, on which the syntax highlighting is done? So if you specify "language format: yaml" then the yaml syntax highlighting is applied to the code block? I am not sure how and why that would make sense, since you can define it in the code block? I would be probably against it, since Obsidian does that pretty good. I wouldn't want to mess with that :D Or can you elaborate on it, how and why that would be beneficial for everyone?

[HippyCraig]

json file

{  
  "Languages": {  
    "irule": "iRule"
  }
} 

Code Block (the dashes represent the 3 ticks, I wanted to show it in context to make it clearer)

------ Rule title:"Example"
Get-Contents
Get-Contents
Get-Contents
Get-Contents
------

Renders as the following the white box is what the icon should look like. The icon isnt loading for me after the latest update I even checked the main.js and I do see the code there for it just wanted to point it out

My though in the above was that each language would have a couple of key value pairs that can define that a little further. The problem I was trying to solve was Language pair would be what would replace the name that would be just after the first set of ticks in the code block, not sure if there case sensative but if they are haveing a few values for language as in the orginal sample in the post above. The display name key pair would be the name that would display in the TAB itself. The SVG File key value pair is the exact name of the file, as sometime they might not match the name of the language so that you can group like files together (not sure if this is case sensative either). The language format key value pair here would be the language used to format the text from within Prism pluging. For example the iRule language is formated like TCL so being able to specify a format that already exists but is used by a differnt product would be helpful. There are custom tools out there are called one thing but under the covers there based on exisitng code formats.

        "language name": ["irule", "iRule", "IRULE"],
        "display name": "iRule",
        "svg file": "iRule.svg",
        "language format": "tcl"

All this is in persuite of making the page more readable as I post up my notes and scripts into our internal documentation. This isnt ment to change how obsidian handles the base parts of a code block this is just within your presetation that you added, this could add more flexablitly. And as a side note I only use Source and Reading view. I expect a lot of pluggins dont support preview mode so that wasnt anything that I was thinking of when writing this.

I hope that clears up my intent but if not let me know and I can try to elaborrate further.

[mugiwara85]

Can you send me this irule svg?

[HippyCraig]

[HippyCraig]

Did what I put make sense, sometimes I ramble a bit LOL

[mugiwara85]

To be honest, I had to read it 5 times...

Please read my answer carefully, before answering, because you are not answering to what I asked, or not even reading it.

1. If you want custom SVGs, you are responsible for it, that they are in the correct format! They need to be plain text svgs without the svg tag.

2. The f5 svg is not valid because it contains this line <?xml version="1.0" encoding="UTF-8"?>. After you remove it, it works fine: I don't know how you managed to display it like that.

3. Obsidian uses two different plugins for syntax highlighting. In editing mode it uses something (I forgot the name), and in reading mode it uses Prism.js.

4. I can change the format to:

   {
   "Languages": {
   "Language": [
     {
       "language name": ["irule", "iRule", "IRULE"],  // this is case-insensitive, but can remain an array
       "display name": "iRule",
       "svg file": "iRule.svg",
       "language format": "tcl"
     },
     {
       "language name": "dockerfile",
       "display name": "Docker File",
       "svg file": "Docker File.svg",
       "language format": "yaml"
     },
   ]
   }
   }

5. I have to check it how I can add syntax highlighting, but it should be possible.

I'll get back to you later, if I have something.

[mugiwara85]

@HippyCraig I think I made it. Feel free to test it. The svg.json format is this:

{
  "languages": [
    {
      "codeblockLanguages": ["language1", "language2", "language3"],
      "displayName": "iRule",
      "svgFile": "iRule.svg",
      "format": "tcl"
    },
    {
      "codeblockLanguages": ["f5"],
      "displayName": "f5 display language",
      "svgFile": "f5.svg",
      "format": "python"
    }
  ]
}

svgFile and format are optional. Syntax highlight is also applied in editing view and reading mode as well. However, there is a small problem. In editing mode you can not overwrite existing syntax highlighting. So if you specify for codeblockLanguages python (which automatically gets syntax highlighting), and for format you define cpp, then it will still have python syntay highlighting. This is only true for editing view. In reading mode it can get overridden as I mentioned, Obsidian uses two different methods for syntax highlighting.

Please test is as soon as possible, and give me a feedback, as I want to release a new version in the next few days.

[HippyCraig]

Sorry for the confusion it was an idea I had and I didnt do a good job of articualting it. My queries were around hte reading view only I dont like having formatted text in edit mode I like to see the actual data, thats why I turened off Preivew mode in obsidian. Let me see if this helps clear it up. In the above example this is the meaning behind it

"language name": "iRule"

Since the above is case insesative one value would be fine here that list was just to cover if case was important. You can think of this as an Alias to the language that would be used by the reading pannel.

"display name": "iRule",

This is here just for the text that is displayed in the Tab itself, I assumed this would be Case Sensative, as its just the display text within the tab itself.

"svg file": "iRule.svg"

This is just the name of the icon to display. When you asked for a copy of the icon I posted teh full one in this thread not the one being used in my configuration.

"language format": "tcl"

This is the language formating I expected to use within Prism.js, in the case of an iRule for example the language its written in is TCL so I just wanted to use the existing format that the JS file already supports. I wasnt asking for anything custom, in terms of syntext formatting.

I have attached the files Im using and there is also an extra image with what I found with my testing

CurrentState.zip

Also just wanted to say thanks for your patience, its sometimes difficult to put into words what my idea's are.

I will also try the version you mentioned just above all, the info in this comment is prior to that. Just thought it would be helpful :)

[HippyCraig]

FYI, I tried to replace the Main.js with the one in your checkin (f321612). I saved the file as UTF-8 with windows CRLF. I compaired it with the orginal file and thats what it was setup as, but when I load Obsidian its not working.

I updated the svg.json file as you have in your example and renamed my image to "f5.svg". But I still have the display issue I mentioned above I can see the space for it but its not rendering the image for me. do they need to be a specific size for them to work right?

[mugiwara85]

In your CurrentState.zip you removed too much from the svg. Ttry this. This is working for me: You only had to remove this one line <?xml version="1.0" encoding="UTF-8"?> And the svg.json is this:

{
  "languages": [
    {
      "codeblockLanguages": ["f5"],
      "displayName": "f5 display language",
      "svgFile": "f5.svg",
      "format": "python"
    }
  ]
}

This part I don't understand: "language format": "tcl" This is the language formating I expected to use within Prism.js, in the case of an iRule for example the language its written in is TCL so I just wanted to use the existing format that the JS file already supports. I wasnt asking for anything custom, in terms of syntext formatting. Language formatting is the same as syntax highlighting, or not? If you specify tcl for language format, then in reading view Prism will appl tcl syntax highlighting. Isn't this what you want?

language name can remain an array, since it still could be possible that you might want to define different codeblock languages (for whatever reason) with the same settings. This way you don't have to create a new language entry with almost the same settings. If you say, that it is 100% this will not happen, I can change it back to a normal string.

[HippyCraig]

Its working great!!

the Language format" was just for syntax highlighting with Prism.js. As for codeblockLanguages, my initall thought was that case was important and this would provide other ways of identifing it. As long as value here is case-insensitive I dont see a need for that to still be an array, if that case ever came up I could just create anohter entry but I dont expect that to happen.

As for the zip file that was before you posted the new main.js and I was just trying to provide more infromation on what I was doing since its wasnt clear with how I write and I think we both around the same time.

This is great, thanks for all the hard work! Below is a screen shot of what I am getting now!!!

[mugiwara85]

Great to hear it works. I will change the codeblockLanguages to codeblockLanguage and to a string, not an array.

After that I document and retest everything and it will be released.

You can test/try out the new features as well if you'd like:

• toggle to uncollapse all codeblock on printing
• bracket highlight (click next to bracket)
• inverse fold
• selection matching (double click on word)
• added option to unwrap code in reading view
• text highlight with from and to markers (syntax: hl:<startPhrase>:<endPhrase>)

[mugiwara85]

I just noticed that the langauge were not case insensitive. I could fix that for reading mode with the above push, but unfortunately I don't think it is possible to fix it for editing mode. I know you don't use editing mode, but since it is a little confusing, I will leave codeblockLanguages as it is now (as array).

[HippyCraig]

Sounds good, an array makes sense especially for these F5 cases were some call it iRule or f5rule or some other terms, they all mean the same thing but that gives added flexabilty and less confusion to having mutiple do the same thing. for the larger audiance of the plugin.

So do I just download the main.js again or will there be a realease to update it though Obsidian itself?

[mugiwara85]

For now, you can just download the main.js and the styles.css. Of course there will be a release, where you can update through Obsidian. I just rewrote a big part of the code, and added some new features. This was the last one. Now I just have to re-test everything to make sure everything works as it should, and after that I will release the new version, and it will be available through Obsidian.

[mugiwara85]

Finally released. Officially available in version 1.2.7

[HippyCraig]

Working great thanks so much