how to set a prefix for a code block (prefix rendered, but not copy-able by clipboardjs)

[flynneva]

I'd like to be able to render a prefix for lines in a code block to indicate the environment (docker, venv, etc.) but would like this prefix to not be copyable by the "copy to clipboard" button.

Is this already possible today with some configuration?

[squidfunk]

You probably mean something like $ to designate a command prompt. In short: no, it's not possible to do in a general way, because it's undecidable whether a line should be prefixed or not. However, you might be able to prepend something to each line with a pseudo-element and some CSS.

[flynneva]

Awesome thanks for the tips @squidfunk! Any chance there is already some documentation somewhere that might help me figure out the CSS + pseudo-element proposal you gave?

[squidfunk]

None that I know of, but it was discussed somewhere before, probably over at the MkDocs issue tracker or discussion board.

[flynneva]

as a possible feature request, do you think it would make sense / be possible to edit the linenumber feature of code blocks and instead add arbitrary strings instead?

Something like:

```py linenums="(venv)$"
def bubble_sort(items):
    for i in range(len(items)):
        for j in range(len(items) - 1 - i):
            if items[j] > items[j + 1]:
                items[j], items[j + 1] = items[j + 1], items[j]
```

Which renders to:

(venv)$ def bubble_sort(items):
(venv)$    for i in range(len(items)):
(venv)$        for j in range(len(items) - 1 - i):
(venv)$            if items[j] > items[j + 1]:
(venv)$                items[j], items[j + 1] = items[j + 1], items[j]

but the (venv)$ is not copied when you click the copy to clipboard button

[flynneva]

hey @bachirelkhoury apologies for the delay on following up here - just catching up with my github pings now.

Unfortunately I haven't gotten to this task yet but I will follow up here once I do figure it out, don't worry and I'll be sure to ping you as well.

[flynneva]

@bachirelkhoury @squidfunk @facelessuser I finally got around to implementing this and I think we ended up with a super flexible solution. Posting here for anyone else who is interested.

1. add a new custom superfence to your mkdocs.yml and specify the format function:

- pymdownx.superfences:
    custom_fences:
        - name: prefix
          class: prefix
          format: !!python/name:custom_doc_tools.superfences.prefix_code_format

2. Implement the format function in a python module somewhere. Within this formatter function, trick the normal superfences highlight formatter to do the hard work for you:

from bs4 import BeautifulSoup

from pymdownx.superfences import SuperFencesBlockPreprocessor, SuperFencesCodeExtension

def prefix_code_format(source, language, class_name, options, md, **kwargs):
       num_lines = len(source.splitlines())
        if 'prefix' in options:
            prefix = options['prefix']
        else:
            prefix = ''

        if 'classes' in kwargs:
            classes = kwargs['classes']
        else:
            classes = []

        if options['lines'] == 0:
            # assume prefix to be set for every line in codeblock
            options['lines'] = f"1-{num_lines}"
        lines = options['lines']
        # handle the case where prefix and hl_lines are specified
        keep_hl = False
        if 'hl_lines' in options:
            keep_hl = True
        if 'hl_lines' not in classes:
            classes.append('hl_lines')
        # set hl_lines to lines to reuse hl_lines formatter logic
        options['hl_lines'] = lines
        # use linenum preprocessor to replace them later with prefix
        if 'linenums' not in options:
            options['linenums'] = '1'

        sf_ext = SuperFencesCodeExtension()
        config = sf_ext.getConfigs()
        preprocessor = SuperFencesBlockPreprocessor(md)
        preprocessor.config = config
        preprocessor.extension = sf_ext
        preprocessor.get_hl_settings()
        preprocessor.line_count = num_lines
        lines_int = preprocessor.parse_hl_lines(lines)
        soup = BeautifulSoup(
            preprocessor.highlight(
                src=source,
                language=language,
                options=options,
                md=md,
                classes=classes,
                id_value='',
                attrs=None),
            features='lxml')
        line_nums_col = soup.find("div", {"class": "linenodiv"})
        for index, row in enumerate(line_nums_col.findAll(class_='normal')):
            if (index + 1) in lines_int:  # index starts at 0, lines expected to start at 1
                row.string = prefix
            else:
                row.string = ''

3. Use in your .md files like this:

```prefix prefix="(venv)$" lines="2-3"
source venv/bin/activate
echo "I am in a venv"
deactivate
echo "I am not in a venv"
```

And you should see something like this:

[mycroftsnm]

Hi, noob here; i tried this and its not working :( , i'm not really sure if i installed correctly, just created a .py in the root of the project, and run with python3 -m mkdocs , but the example provided its not working, i also tried:

``` {.prefix linenums="1" prefix="test" lines="0"}
import foo.bar
```

in md file
but it renders literally like
{.prefix linenums="1" prefix="test" lines="0"} import foo.bar

The example also renders like :
prefix prefix="(venv)$" lines="2-3" source venv/bin/activate echo "I am in a venv" deactivate echo "I am not in a venv"

can u provide specific instructions about the installation ? thanks

[flynneva]

@mycroftsnm here is a quick demo i just whipped up tonight. Check it out and let me know if that helps you out or if it is still missing something.

@squidfunk feel free to take any examples from that demo repo and move them into the mkdocs-material docs if desired.

[mycroftsnm]

Works perfect now, thanks :)

[ben519]

@facelessuser helped me (mostly) accomplish this, as discussed here.

extra.css

/* shell prompt */
.language-console .gp {
    font-weight: 800;
    user-select: none;
}
.language-console .go {
    font-style: italic;
}

somepage.md

```console
bill@gates:~$ git log
commit 88d8887beaad2cfd37d04fb00f38c05077581057 (HEAD -> main)
Author: bill123 <[email protected]>
Date:   Sun Sep 11 13:09:50 2022 -0500

    first commit
```

This produces output like this.

The copy button copies everything, but if you click and drag to highlight the code, it will not copy the prompt (bill@gates:~$).

[shepherdjerred]

You can do this with the following added TypeScript -- you'll need to compile before using. Define styles for console-input and console-output.

Example output:

Only commands are selectable:

Copying omits the comments, output, and prefix. This is what's copied:

rspm create source --name=local-python-src --type=local-python

const codeBlocks = [...document.querySelectorAll(".highlight > pre > code")];

const rules = [
  // shell commands
  {
    prefix: "$ ",
    classes: ["code-noselect", "console-input"],
  },
  // comments
  {
    prefix: "# ",
    plainText: true,
    entireLine: true,
    classes: ["code-noselect", "c1"],
  },
  // standard output
  {
    prefix: "<< ",
    plainText: true,
    entireLine: true,
    deletePrefix: true,
    classes: ["code-noselect", "console-output"],
  },
];

const zip = (a, b) => a.map((k, i) => [k, b[i]]);

// update code blocks with the mappings defined above
codeBlocks.forEach((block) => {
  let text = (block.textContent || "").split("\n");
  let html = block.innerHTML.split("\n");
  let lines = zip(text, html);

  lines = lines.map((line) => {
    const lineText = line[0];
    const lineHtml = line[1];

    const matches = rules.filter((rule) => lineText.startsWith(rule.prefix));

    if (matches.length > 1) {
      throw new Error("multiple rule matches");
    }

    if (matches.length === 1) {
      const matchingRule = matches[0];
      const classes = matchingRule.classes.join(" ");
      let newContent: string;

      if (matchingRule.plainText) {
        newContent = lineText;
      } else {
        newContent = lineHtml;
        newContent = newContent.replace(
          matchingRule.prefix.replace(" ", `<span class="w"> </span>`),
          matchingRule.prefix
        );
      }

      if (matchingRule.entireLine) {
        newContent = `<span class="${classes}">${newContent}</span>`;
      } else {
        newContent = newContent.replace(
          matchingRule.prefix,
          `<span class="${classes}">${matchingRule.prefix}</span>`
        );
      }

      if (matchingRule.deletePrefix) {
        newContent = newContent.replace(matchingRule.prefix, "");
      }

      return newContent;
    } else {
      return lineHtml;
    }
  });

  block.innerHTML = lines.join("\n").trim();
});

// Update html attributes to remove elements with `code-noselect` when copying to clipboard
window.addEventListener("load", () => {
  const ids = document.querySelectorAll("*[data-clipboard-target]");
  ids.forEach((id) => {
    const attr = id.getAttribute("data-clipboard-target");
    if (!attr) {
      return;
    }
    const node = document.querySelector(attr);
    if (!node) {
      return;
    }
    let text: string[] = [];
    node.childNodes.forEach((child) => {
      if (child.nodeName === "#text") {
        text.push(child.textContent || "");
      } else if (!(child as any).classList.contains("code-noselect")) {
        text.push((child as any).innerText);
      }
    });
    let joinedText = text.join("");
    id.setAttribute(
      "data-clipboard-text",
      joinedText.trim().replace(/(?:\h*\n){2,}/g, "\n")
    );
    id.removeAttribute("data-clipboard-target");
  });
});