Copy button functionality for "inline code" objects. #4376

New Issue

OVERLORD · 2026-02-05T08:42:57+03:00

OVERLORD commented

2026-02-05 08:42:57 +03:00

Originally created by @BladeWDR on GitHub (Dec 23, 2023).

Describe the feature you'd like

It would be great if inline code elements included a copy button the way code blocks do.

Inline code tends to fit into ordered or unordered lists better, and it can be handy (especially for the sort of technical documentation I tend to write) to have a single one click copy.

Describe the benefits this would bring to existing BookStack users

Easier copy / paste functionality for small snippets of code / command line standard input.

Can the goal of this request already be achieved via other means?

Not that I'm aware of.

Have you searched for an existing open/closed issue?

I have searched for existing issues and none cover my fundamental request

How long have you been using BookStack?

3 months to 1 year

Additional context

No response

Originally created by @BladeWDR on GitHub (Dec 23, 2023). ### Describe the feature you'd like It would be great if inline code elements included a copy button the way code blocks do. Inline code tends to fit into ordered or unordered lists better, and it can be handy (especially for the sort of technical documentation I tend to write) to have a single one click copy. ![image](https://github.com/BookStackApp/BookStack/assets/1136623/8a5043ed-c233-4769-adec-75766fd5e694) ### Describe the benefits this would bring to existing BookStack users Easier copy / paste functionality for small snippets of code / command line standard input. ### Can the goal of this request already be achieved via other means? Not that I'm aware of. ### Have you searched for an existing open/closed issue? - [X] I have searched for existing issues and none cover my fundamental request ### How long have you been using BookStack? 3 months to 1 year ### Additional context _No response_

OVERLORD added the 🔨 Feature Request label 2026-02-05 08:42:57 +03:00

OVERLORD commented

2026-02-05 08:43:09 +03:00

@ssddanbrown commented on GitHub (Dec 23, 2023):

Hi @BladeWDR,
This is relevant to prior thread #1612.

As per that thread, I'm not really keen on adding this to inline blocks but if you'd like a custom JavaScript snippet to copy-on-click, so you could easily allow on your own instance, I'd be happy to provide one when I get a convenient moment to do so.

@ssddanbrown commented on GitHub (Dec 23, 2023): Hi @BladeWDR, This is relevant to prior thread #1612. As per that thread, I'm not really keen on adding this to inline blocks but if you'd like a custom JavaScript snippet to copy-on-click, so you could easily allow on your own instance, I'd be happy to provide one when I get a convenient moment to do so.

OVERLORD commented

2026-02-05 08:43:13 +03:00

@BladeWDR commented on GitHub (Dec 24, 2023):

That would be great.

@BladeWDR commented on GitHub (Dec 24, 2023): That would be great.

OVERLORD commented

2026-02-05 08:43:15 +03:00

@ssddanbrown commented on GitHub (Dec 26, 2023):

@BladeWDR This should do the job, although depending on browser you might need to be using a secure context (valid https active):

<script type="module">
  const copyElementTextToClipboard = async function(event) {
    const copyText = event.target.textContent;
    try {
      await navigator.clipboard.writeText(copyText);
      window.$events.success('Code copied to clipboard!');
    } catch (err) {
      window.$events.error('Failed to write code to clipboard!')
    }
  };
  
  const inlineCodeElems = document.querySelectorAll('.page-content code:not(pre code)');
  for (const inlineCodeElem of inlineCodeElems) {
    inlineCodeElem.addEventListener('click', copyElementTextToClipboard);
  }
</script>

If you're not running a secure context, I could provide an alternative if needed although it's a little more complex.

@ssddanbrown commented on GitHub (Dec 26, 2023): @BladeWDR This should do the job, although depending on browser you might need to be using a secure context (valid https active): ```html <script type="module"> const copyElementTextToClipboard = async function(event) { const copyText = event.target.textContent; try { await navigator.clipboard.writeText(copyText); window.$events.success('Code copied to clipboard!'); } catch (err) { window.$events.error('Failed to write code to clipboard!') } }; const inlineCodeElems = document.querySelectorAll('.page-content code:not(pre code)'); for (const inlineCodeElem of inlineCodeElems) { inlineCodeElem.addEventListener('click', copyElementTextToClipboard); } </script> ``` If you're not running a secure context, I could provide an alternative if needed although it's a little more complex.

OVERLORD commented

2026-02-05 08:43:18 +03:00

@BladeWDR commented on GitHub (Dec 26, 2023):

Hey Dan,

Thanks a lot for taking the time on this.

Yeah, I'm running Bookstack behind a reverse proxy with valid SSL so it
should be fine.

This snippet would go in the custom HTML head content under Customization,
right? I'll give it a shot when I get a chance.

On Mon, Dec 25, 2023, 6:50 PM Dan Brown @.***> wrote:

@BladeWDR https://github.com/BladeWDR This should do the job, although
depending on browser you might need to be using a secure context (valid
https active):
<script type="module"> const copyElementTextToClipboard = async function(event) { const copyText = event.target.textContent; try { await navigator.clipboard.writeText(copyText); window.$events.success('Code copied to clipboard!'); } catch (err) and{ window.$events.error('Failed to write code to clipboard!') } }; const inlineCodeElems = document.querySelectorAll('.page-content code:not(pre code)'); for (const inlineCodeElem of inlineCodeElems) { inlineCodeElem.addEventListener('click', copyElementTextToClipboard); }</script>
If you're not running a secure context, I could provide an alternative if
needed although it's a little more complex.

—
Reply to this email directly, view it on GitHub
https://github.com/BookStackApp/BookStack/issues/4740#issuecomment-1869155513,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAIVP3455JSTITK6URHZVADYLIGKZAVCNFSM6AAAAABBBADATGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNRZGE2TKNJRGM
.
You are receiving this because you were mentioned.Message ID:
@.***>

@BladeWDR commented on GitHub (Dec 26, 2023): Hey Dan, Thanks a lot for taking the time on this. Yeah, I'm running Bookstack behind a reverse proxy with valid SSL so it should be fine. This snippet would go in the custom HTML head content under Customization, right? I'll give it a shot when I get a chance. On Mon, Dec 25, 2023, 6:50 PM Dan Brown ***@***.***> wrote: > @BladeWDR <https://github.com/BladeWDR> This should do the job, although > depending on browser you might need to be using a secure context (valid > https active): > > <script type="module"> > const copyElementTextToClipboard = async function(event) { > const copyText = event.target.textContent; > try { > await navigator.clipboard.writeText(copyText); > window.$events.success('Code copied to clipboard!'); > } catch (err) and{ > window.$events.error('Failed to write code to clipboard!') > } > }; > > const inlineCodeElems = document.querySelectorAll('.page-content code:not(pre code)'); > for (const inlineCodeElem of inlineCodeElems) { > inlineCodeElem.addEventListener('click', copyElementTextToClipboard); > }</script> > > If you're not running a secure context, I could provide an alternative if > needed although it's a little more complex. > > — > Reply to this email directly, view it on GitHub > <https://github.com/BookStackApp/BookStack/issues/4740#issuecomment-1869155513>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AAIVP3455JSTITK6URHZVADYLIGKZAVCNFSM6AAAAABBBADATGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNRZGE2TKNJRGM> > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> >

OVERLORD commented

2026-02-05 08:43:23 +03:00

@ssddanbrown commented on GitHub (Dec 26, 2023):

This snippet would go in the custom HTML head content under Customization, right?

Yeah, that's right, just paste/append it in there.

@ssddanbrown commented on GitHub (Dec 26, 2023): > This snippet would go in the custom HTML head content under Customization, right? Yeah, that's right, just paste/append it in there.

OVERLORD commented

2026-02-05 08:43:29 +03:00

@techauthoruk commented on GitHub (Nov 28, 2025):

@ssddanbrown - Dan, I know this is an old post, but you mentioned : If you're not running a secure context, I could provide an alternative if needed although it's a little more complex.

Im running my local instance using HTTP (not HTTPS) - could you provide the alternative? I find the option of being able to single click inline code and copy to the clipboard really useful.

Many thanks

Mark

@techauthoruk commented on GitHub (Nov 28, 2025): @ssddanbrown - Dan, I know this is an old post, but you mentioned : `If you're not running a secure context, I could provide an alternative if needed although it's a little more complex`. Im running my local instance using HTTP (not HTTPS) - could you provide the alternative? I find the option of being able to single click inline code and copy to the clipboard really useful. Many thanks Mark

OVERLORD commented

2026-02-05 08:43:31 +03:00

@ssddanbrown commented on GitHub (Dec 6, 2025):

@techauthoruk Sorry I had missed your message. Sure, here's an altered variant which should work in HTTP environments (of browsers still allow this hack):

<script type="module">
  async function copyTextToClipboard(text) {
      if (window.isSecureContext && navigator.clipboard) {
          await navigator.clipboard.writeText(text);
          return;
      }

      // Backup option where we can't use the navigator.clipboard API
      const tempInput = document.createElement('textarea');
      tempInput.setAttribute('style', 'position: absolute; left: -1000px; top: -1000px;');
      tempInput.value = text;
      document.body.appendChild(tempInput);
      tempInput.select();
      document.execCommand('copy');
      document.body.removeChild(tempInput);
  }

  const copyElementTextToClipboard = async function(event) {
    const copyText = event.target.textContent;
    try {
      await copyTextToClipboard(copyText);
      window.$events.success('Code copied to clipboard!');
    } catch (err) {
      window.$events.error('Failed to write code to clipboard!')
    }
  };
  
  const inlineCodeElems = document.querySelectorAll('.page-content code:not(pre code)');
  for (const inlineCodeElem of inlineCodeElems) {
    inlineCodeElem.addEventListener('click', copyElementTextToClipboard);
  }
</script>

@ssddanbrown commented on GitHub (Dec 6, 2025): @techauthoruk Sorry I had missed your message. Sure, here's an altered variant which should work in HTTP environments (of browsers still allow this hack): ```html <script type="module"> async function copyTextToClipboard(text) { if (window.isSecureContext && navigator.clipboard) { await navigator.clipboard.writeText(text); return; } // Backup option where we can't use the navigator.clipboard API const tempInput = document.createElement('textarea'); tempInput.setAttribute('style', 'position: absolute; left: -1000px; top: -1000px;'); tempInput.value = text; document.body.appendChild(tempInput); tempInput.select(); document.execCommand('copy'); document.body.removeChild(tempInput); } const copyElementTextToClipboard = async function(event) { const copyText = event.target.textContent; try { await copyTextToClipboard(copyText); window.$events.success('Code copied to clipboard!'); } catch (err) { window.$events.error('Failed to write code to clipboard!') } }; const inlineCodeElems = document.querySelectorAll('.page-content code:not(pre code)'); for (const inlineCodeElem of inlineCodeElems) { inlineCodeElem.addEventListener('click', copyElementTextToClipboard); } </script> ```

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#4376