mugiwara85
Custom SVG's
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?
You definitely shouldn't modify the main.js. But I am a little confused. What would you like to achieve? What is your goal?
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.
I'm happy to add them if you'd like :) That would be the easiest way probably
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>;
}
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?
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.
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.
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?
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!!!
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
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.
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.
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"/>
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>
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?
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
abcis the language you'll type into a codeblock as a language, andABC Language2is 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 beABC 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?
Thanks I did not see at first that was a whole file, but regardless its not working Its a single line file
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
No problem. Sorry, I am not quite sure what would you like to me to do. Can you show an example?
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. :)
Does the above make sense sometimes I wonder if I over explain things LOL
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?
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.