possibility to add line numbers to code blocks #101

pietroppeter · 2022-07-02T17:35:23Z

we should have the ability to add line numbers to code blocks, both those generate by nbCode and nbFile. Ideally it should be something customizable by single block and one could set a global option. defaults would probably be to have it disabled in code blocks produce by nbCode and maybe enabled for blocks produce by nbFile.

The text was updated successfully, but these errors were encountered:

dlesnoff · 2023-03-29T12:34:45Z

What about the new block nbCodeSkip?
Should the global option enable line numbers for both, or only for nbCode?
Should this work for nbPython code blocks too?

HugoGranstrom · 2023-03-29T17:37:21Z

IMO, we should have a single switch in nimib that all the official nbCode-like blocks use. nbPython will be moved to nimibex but I think we should implement it for it as well.

pietroppeter · 2023-03-29T20:41:48Z

Yes I think one way to implement a global switch for all code like blocks would be to make sure that nbCodeSource partial is general enough to support all code blocks and is used by all code blocks. Then implement a addLineNumbers renderProc and make sure it is present in all code blocks. This proc would only adds line numbers if a boolean flag enableLineNumbers is present (and true) in either block context or (only if not present) it would check the presence of enableLineNumbers true in doc context. In this way can have a global switch (add enable true in doc context), that can be switched off for specific blocks (add enable false to specific block). Also line numbers can be added only to specific blocks if disabled globally (add enable true for specific block).

pietroppeter · 2023-06-10T09:02:28Z

notes from call nimib speaking hours:

proc addLineNumbers(doc: var NbDoc, blk: var NbBlock) =
  if blk.context["enableLineNumbers].castBoolor doc.context["enableLineNumbers].castBool:
    blk.context["codeHighlighted"] = addLineNumbersToHIghlightedCode(blk.context["codeHighlighted"].castStr)

template enableLineNumbersDoc =
  nb.context["enableLineNumber"] = true

template enableLineNumbersBlock =
  nb.blk.context["enableLineNumber"] = true

assert addLineNumbersToHIghlightedCode("""
func</span> decode(secret: openArray[<span class="hljs-built_in">int</span>]): <span class="hljs-built_in">string</span> =
  <span class="hljs-comment">## classified by NSA as &lt;strong&gt;TOP SECRET&lt;/strong&gt;</span>
  <span class="hljs-keyword">for</span> c <span class="hljs-keyword">in</span> secret:
    <span class="hljs-literal">result</span>.add <span class="hljs-built_in">char</span>(c)
""") == """
<span class="hljs-comment">1</span> func</span> decode(secret: openArray[<span class="hljs-built_in">int</span>]): <span class="hljs-built_in">string</span> =
<span class="hljs-comment">2</span>   <span class="hljs-comment">## classified by NSA as &lt;strong&gt;TOP SECRET&lt;/strong&gt;</span>
<span class="hljs-comment">3</span>   <span class="hljs-keyword">for</span> c <span class="hljs-keyword">in</span> secret:
<span class="hljs-comment">4</span>     <span class="hljs-literal">result</span>.add <span class="hljs-built_in">char</span>(c)
"""

dlesnoff · 2023-10-04T09:36:27Z

I noticed that the example you gave to me has one issue. If someone tries to select the code, he would also select the line numbers.
I have asked ChatGPT4 for a small html/JS example to render a code block snippet with a copy-to-clipboard button and lines numbering.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Code Renderer</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <button id="copyButton">Copy to Clipboard</button>
  <pre id="code"><code>// Here is your code snippet
function helloWorld() {
  console.log('Hello, world!');
}</code></pre>
  <script src="script.js"></script>
</body>
</html>

JS

document.addEventListener("DOMContentLoaded", function() {
  const codeElement = document.getElementById('code');
  const copyButton = document.getElementById('copyButton');
  const codeText = codeElement.innerText;
  const lineCount = codeText.split('\n').length;

  let lineNumberHTML = '';
  for (let i = 1; i <= lineCount; i++) {
    lineNumberHTML += i + '\n';
  }

  const lineNumberElement = document.createElement('code');
  lineNumberElement.className = 'line-numbers';
  lineNumberElement.innerText = lineNumberHTML;
  codeElement.insertBefore(lineNumberElement, codeElement.firstChild);

  copyButton.addEventListener('click', function() {
    navigator.clipboard.writeText(codeText).then(function() {
      console.log('Code copied to clipboard');
    }).catch(function(err) {
      console.error('Could not copy text: ', err);
    });
  });
});

CSS

body {
  font-family: 'Courier New', Courier, monospace;
}

pre {
  position: relative;
  border: 1px solid #ccc;
  padding-left: 30px;
}

code {
  display: block;
  white-space: pre;
}

.line-numbers {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 10px;
  user-select: none; /* Prevent text selection */
  color: #888;
}

It encloses the code inside <pre> and <code> tags which could be replaced by <span class="hljs-comment"> but inside a <pre>. I do not know how I could do something similar as the JS code.

dlesnoff · 2023-11-09T17:50:51Z

Hello,
I am not sure how to integrate the last changes that I made in my draft Pull Request, to the code block template.
I guess that I have to give as argument nb and nb.blk so my best guess for now is to change the template definition in src/nimib.nim:

template nbCode*(body: untyped) =
  newNbCodeBlock("nbCode", body):
    addLineNumbers(nb, nb.blk)
    captureStdout(nb.blk.output):
      body

This does absolutely nothing. Would you have any hint on how to proceed?

HugoGranstrom · 2023-11-09T20:19:25Z

We have something we call renderPlan which are procs that are run when we render a proc. We do the code highlighting in the renderPlan for example. It is defined here:

nimib/src/nimib/renders.nim

Line 48 in e256687

    
           doc.renderPlans["nbCode"] = @["highlightCode"] # default partial automatically escapes output (code is escaped when highlighting)

A renderPlan consists of a list of renderProcs that are run in order. So that would be the correct place to add this feature.

I think the reason your example doesn't work is because the codeHighlighted hasn't been filled yet in the context because it is filled on render. So you pass in an empty string to your proc basically. And then it is overridden on render.

Let me know if you want a more thorough explaination, but it might take some time. I'm quite busy at the moment 😄

HugoGranstrom · 2023-11-10T07:32:28Z

To flesh out my previous answer, you could say nimib has 3 phases when it generates a document:

Initialization: all the partials, renderProcs and renderPlans are populated. This is basically what you see in render.nim.
Creation of blocks: this is what happens when you use a block, like nbCode: echo "Hello world". This will populate the block with its inputs in its context object. In the case of nbCode these are the raw code and captured output.
Render: here the renderPlan (and its renderProcs) are run. And once they have run the partial for the block is rendered. It's here that the highlighted code is populated in the context.

So the problem you had was that you tried to add the line numbers in step 2 while the highlighted code wasn't available until step 3. But if you add it as a renderProc and add it to the renderPlan och nbCode it should be available to you.

dlesnoff · 2023-11-10T11:15:26Z

Thank you for the explanations. I was able to move forward and debug the code. There are still discussions to have on the enableLineNumbersBlock and the HTML rendering of the numbers, but otherwise, I have a working proof of concept.

I wish you all the best for your work.

HugoGranstrom · 2023-11-11T07:24:51Z

Awesome, thanks 😄 regarding the copy-ability of the code blocks without including the line numbers, is wrapping the code in a table the usual solution to this? If so I'd say we could try it out and see how it works out 👍

dlesnoff · 2023-11-13T21:42:57Z

If I believe the above JS generated by ChatGPT4 (thus highly not reliable), it's first approach is a div container.
It replaces in the above HTML:

<div class="code-container">
  <button id="copyButton" class="copy-button">Copy</button>
  <pre id="code"><code class="line-numbers">1
2
3
4</code><code>// Here is your code snippet
function helloWorld() {
  console.log('Hello, world!');
}</code></pre>
</div>

I am unsure of what is the “usual” method here. It could be interpreted as table values as well as element of a div. I'll give in a second post a table solution.

pietroppeter · 2023-11-15T00:08:38Z

from a google search, it appears there are alternative approaches that do not even need to add numbers in text but automatically generate them through css, it seems something we could explore if it works for us too: https://stackoverflow.com/a/41354764

dlesnoff · 2024-02-19T14:17:11Z

Hello,
I tried to update the HTML approach but I don't remember exactly what I had in mind for the HTML div approach.
The table approach is too complex and risky. It removes code's indentation.

Both approaches, CSS and HTML should be tested, as some CSS styling might turn off line numbers.
I think that generating them through CSS is the best approach, as it can be changed on the fly.

pietroppeter · 2024-02-25T08:55:51Z

we were discussing about this with @HugoGranstrom during speaking hours, it is not clear to us how we can help? do you plan to work on the CSS one and we should discard the HTML one? to you want a review on the PR for the HTML approach (#220) and see if we can merge that? Let us know and thanks for working on this!

pietroppeter · 2024-03-23T07:15:31Z

This css has an interesting recipe based on simple css and html manipulation: https://css.winterveil.net/

pietroppeter added the enhancement New feature or request label Jul 2, 2022

pietroppeter assigned dlesnoff Jun 10, 2023

dlesnoff linked a pull request Nov 5, 2023 that will close this issue

Add: function to add line numbers to block #220

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

possibility to add line numbers to code blocks #101

possibility to add line numbers to code blocks #101

pietroppeter commented Jul 2, 2022

dlesnoff commented Mar 29, 2023

HugoGranstrom commented Mar 29, 2023

pietroppeter commented Mar 29, 2023 •

edited

Loading

pietroppeter commented Jun 10, 2023 •

edited

Loading

dlesnoff commented Oct 4, 2023 •

edited

Loading

dlesnoff commented Nov 9, 2023

HugoGranstrom commented Nov 9, 2023

HugoGranstrom commented Nov 10, 2023

dlesnoff commented Nov 10, 2023

HugoGranstrom commented Nov 11, 2023

dlesnoff commented Nov 13, 2023

pietroppeter commented Nov 15, 2023 •

edited

Loading

dlesnoff commented Feb 19, 2024 •

edited

Loading

pietroppeter commented Feb 25, 2024

pietroppeter commented Mar 23, 2024

possibility to add line numbers to code blocks #101

possibility to add line numbers to code blocks #101

Comments

pietroppeter commented Jul 2, 2022

dlesnoff commented Mar 29, 2023

HugoGranstrom commented Mar 29, 2023

pietroppeter commented Mar 29, 2023 • edited Loading

pietroppeter commented Jun 10, 2023 • edited Loading

dlesnoff commented Oct 4, 2023 • edited Loading

dlesnoff commented Nov 9, 2023

HugoGranstrom commented Nov 9, 2023

HugoGranstrom commented Nov 10, 2023

dlesnoff commented Nov 10, 2023

HugoGranstrom commented Nov 11, 2023

dlesnoff commented Nov 13, 2023

pietroppeter commented Nov 15, 2023 • edited Loading

dlesnoff commented Feb 19, 2024 • edited Loading

pietroppeter commented Feb 25, 2024

pietroppeter commented Mar 23, 2024

pietroppeter commented Mar 29, 2023 •

edited

Loading

pietroppeter commented Jun 10, 2023 •

edited

Loading

dlesnoff commented Oct 4, 2023 •

edited

Loading

pietroppeter commented Nov 15, 2023 •

edited

Loading

dlesnoff commented Feb 19, 2024 •

edited

Loading