add this script to generate automatically clipboard button

[os3albert]

official github script

function createNode(text: string): Element {
  const node = document.createElement('pre')
  node.style.width = '1px'
  node.style.height = '1px'
  node.style.position = 'fixed'
  node.style.top = '5px'
  node.textContent = text
  return node
}

function copyNode(node: Element): Promise<void> {
  if ('clipboard' in navigator) {
    return navigator.clipboard.writeText(node.textContent || '')
  }

  const selection = getSelection()
  if (selection == null) {
    return Promise.reject(new Error())
  }

  selection.removeAllRanges()

  const range = document.createRange()
  range.selectNodeContents(node)
  selection.addRange(range)

  document.execCommand('copy')
  selection.removeAllRanges()
  return Promise.resolve()
}

export function copyText(text: string): Promise<void> {
  if ('clipboard' in navigator) {
    return navigator.clipboard.writeText(text)
  }

  const body = document.body
  if (!body) {
    return Promise.reject(new Error())
  }

  const node = createNode(text)
  body.appendChild(node)
  copyNode(node)
  body.removeChild(node)
  return Promise.resolve()
}

an other script found online

// copy code icon markup
const copyIcon = `<svg aria-hidden="true" data-testid="geist-icon" fill="none" height="18" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="18" style="color: currentcolor;"><path d="M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z"></path></svg>`

// insert copy buttons for code blocks
const codeBlocks = document.querySelectorAll("div.h-r")
codeBlocks.forEach((codeBlock) => {
    codeBlock.insertAdjacentHTML(
        "afterbegin",
        `<button class="copy" aria-label="Copy code to clipboard" style="float:right;">${copyIcon}</button>`
    )


})

// handler that saves the code block innerText to clipboard
function copyCodeBlock(event) {
    const copyButton = event.currentTarget
    // const codeBlock = copyButton.parentElement.querySelector("pre.highlight")  
    // const code = codeBlock.innerText.trim()


    const codeBlock = this.parentNode.querySelector("pre.h").lastChild
    const code = codeBlock.data.trim()

    // remove "$ " prompt at start of lines in code
    const strippedCode = code.replace(/^[\s]?\$\s+/gm, "")
    window.navigator.clipboard.writeText(strippedCode)

    // change the button text temporarily
    copyButton.textContent = "Copied!"
    setTimeout(() => copyButton.innerHTML = copyIcon, 3000)
}

// register event listeners for copy buttons
const copyButtons = document.querySelectorAll("button.copy")
copyButtons.forEach((btn) => {
    btn.addEventListener("click", copyCodeBlock)
})

[yusukebe]

Could you create the PR?

[os3albert]

I'll learn go, can you give me any advice or resources to switch easily from java to go, is it similar to C i know, isn't it?

[os3albert]

I don't understand where is the binding between go language and javascript, in which folder I have to check?

[yusukebe]

Hi @os3albert !

Thanks! The JavaScript code is actually written in the template file:

https://github.com/yusukebe/gh-markdown-preview/blob/master/cmd/template.html

Thus, I don't think there is a need to modify the Go files.