XF 2.3 Creating a Custom Text Formatting Option for Terminal Command w/ Copy

[ItsAConspiracy]

How would I go about creating a custom text formatting option that will mimic the following behavior?
See it in action here: how2pi.com



Im working on moving my half baked "How to" instructional website to Xenforo and Id really like to carry over this functionality. If I can make it into a plugin I would happily distribute it here. I would want people posting to my forum to have this functionality too, so it would be nice to be able to create another text formatting option they could choose. Just looking to get pointed in the right direction. TIA.

 

[Jeremy P]

We have existing JS handlers for copying the contents of an element to the clipboard. Roughly...

<a href="#" data-xf-init="copy-to-clipboard" data-copy-target=".some-css-selector">Copy</a>

<div class="some-css-selector">This text will be copied.</div>

You can mimic this with a custom BB code. If you wanted to integrate it with the existing [code] BB code, I think you could accomplish it via template edits to the bb_code_tag_code template, and maybe a little custom Less/CSS.

 

[ItsAConspiracy]

We have existing JS handlers for copying the contents of an element to the clipboard. Roughly...

<a href="#" data-xf-init="copy-to-clipboard" data-copy-target=".some-css-selector">Copy</a>

<div class="some-css-selector">This text will be copied.</div>

You can mimic this with a custom BB code. If you wanted to integrate it with the existing [code] BB code, I think you could accomplish it via template edits to the bb_code_tag_code template, and maybe a little custom Less/CSS.

Thank for the response. After some more thought, I think what Im looking for is to be able to tag text like so:

[CMD]sudo apt update[/CMD]

Is there a way to create a custom BB code like that so I can apply the appropriate css? Sorry for the noob questions...