Customizing the color of the squares in "Codemap explorer"

[MagTun]

With the theme and color I use, I can't see the squares in "Codemap explorer" that indicates the level of the headings [cf "editor" on the printscreen below] . I can only see them when I am on the heading [cf "keep file open" ] or when I mouse over the heading on codemap explore [cf "color" - sorry my printscreen didn't keep the mouse cursor] . It would be nice to be able to customize the color of these square.

And if it's not too much to ask, it would be awesome to have a different customizable color per level.

Thanks!

[oleg-shilo]

Unfortunately VSCode does not allow customizing the colours of the TreeView node icons. However I decided allow setting completely custom icon (not colour) to allow users to handle cases like yours.

The update v1.15.2 just has been published.

You can now specify in your mapper definition icon path instead icon name. So the only thing that you need to do is to store somewhere set of icons that is suitable for your VSCode theme and then update your mappers with the path to the desired icon:

---

1.15.0 (12 August 2020)

• Issue #41: Customizing the color of the squares in "Codemap explorer" An additional format for icon allows specifying custom path: path:<absolute path to svg icon file> The path string can contain special token {theme} which is replaced at runtime with the word "dark" orc "light". Depending on the VS theme.

    "codemap.md": [
      {
          "pattern": "^(\\s*)### (.*)",
          "clear": "###",
          "prefix": " -",
          "icon": "path:E:\\icons\\VSCode\\codemap\\{theme}\\custom_level_a.svg"
      },
      . . .

[MagTun]

You are amazing, thanks so much for the update!

I use a custom mapper so I am not sure how I should set the "icon": "path:..." for each of the 4 level I use.

Here is my current set up :

In settings.json:

    "codemap.maxNestingLevel": "4",
    "codemap.x": [{"C:/Users/Me/mydocs/codemap.js ",
    "codemap.py": "config:codemap.x",
    "codemap.pyw": "config:codemap.x",
    "codemap.json": "config:codemap.x",

In C:/Users/Me/mydocs/codemap.js:

"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
const fs = require("fs");
class mapper {

    static read_all_lines(file) {
        let text = fs.readFileSync(file, 'utf8');
        return text.split(/\r?\n/g);
    }

    static generate(file) {
        let members = [];
        try {
            let line_num = 0;
            let image_index = 1;
            mapper
                .read_all_lines(file)
                .forEach(line => {
                    line_num++;
                    line = line.trimStart();
                    // https://www.w3schools.com/jsref/jsref_obj_string.asp
                    // regex: https://regexr.com/
                    // the 
                    // <\!\-\>  = html
                    //  /* = css

                    if (line.includes("# =¤"))
                        members.push(`${line.replace(/^[\s\t/;\<\!\-]*# = ¤\s*/,"")}|${line_num}|level1`);
                    else if (line.includes("# -¤¤"))
                        members.push(`${line.replace(/^[\s\t/;\<\!\-\>]*# - ¤¤\s*/,"   ")}|${line_num}|level2`);
                    else if (line.includes("# .¤¤¤"))
                        members.push(`${line.replace(/^[\s\t/;\<\!\-\>/*]*# .¤¤¤\s*/,"      ")}|${line_num}|level3`);
                    else if (line.includes("# .   ¤¤¤¤"))
                        members.push(`${line.replace(/^[\s\t/;\<\!\-\>/*]*# . ¤¤¤¤\s*/,"      ")}|${line_num}|level4`);
                });
        } catch (error) {}
        return members;
    }
}
exports.mapper = mapper;

[oleg-shilo]

you can do it like this:

members.push(`${line.replace(/^[\s\t/;\<\!\-]*# = ¤\s*/,"")}|${line_num}|path:E:\\icons\\VSCode\\codemap\\{theme}\\your_custom_level_1.svg`);

[MagTun]

Super!

I am using this custom path with a .png icon (16x16 pixels) and it's perfect: path:C:\\Users\\user\\Desktop\\myIcons\\CodemapIcon\\level4.png

I am even able to have more than 3 levels! This is so great!

Also, I had to reload the vscode window via the palette to see the new icons.

[oleg-shilo]

Glad it helped :)

[MagTun]

I noticed a couple of days/weeks ago that the custom icons I used in Codemap explorer are not displayed anymore.

I have checked the path (nothing has changed), I have also converted my icon, which were .png, into .svg, but still I am not able to display them.

I am able to get the builtin icons using level1 or class but not my custom icons.

I am still using the same script as above (updated with your last advice):

if (line.includes("# ============================================================== ¤"))
members.push(`${line.replace(/^[A-Za-z\s\t/;\<\!\-\>/*]*# == ¤\s*/,"")}|${line_num}|path:C:\\Users\\Muse\\Desktop\\...\\VSCode\\CodemapIcon\\1.svg`);

Any idea if this bug is coming from my side or it something changed in the extension code?

[oleg-shilo]

The last release was in Sep 2020 (~5 month ago). Thus it is unlikely the change is coming from the extension. Though I noticed it was update of VSCode a few days ago and the big change was something about the icons... Maybe it was it.

[MagTun]

Thanks for you quick answer! I am not sure I understand. Do you mean that there was a change in the way VSCode handle the icons and thus the extension needs to be updated to reflect this change?

[oleg-shilo]

Not exactly. The extension has not changed since Sep 2020. Thu the change in behavior is either contributed by your environment (e.g it triggers a hidden flaw in the extension implementation) or by the changes in the VSCode itself, which happens a lot :(

But I cannot be sure about VSCode as a suspect as I have no evidence of that. It was my pure speculation since the latest update was specifically nominating the icons a a big change.

I will be working on the extension again (after I finish my commitments to my other two open source projects) so I will definitely see the problem if it is there.

[MagTun]

Thanks for taking the time to write a detailed answer!

[oleg-shilo]

I can confirm now that I do not see this problem:

At least with the

[MagTun]

Yes it's also working for me now. Not sure what has changed because my codemap.js is still same but, yeah, it's back! I don't know if it is linked but just before the icons came back I disabled all my vs-code extensions and then reload vscode and then re-enable them all.