How to display source code block?

Wappler General How To
#1

Here is my use case, I have a code snippet that I would like a customer to be able to copy and paste for use in their website.

Is there a recommendation on how to have this code display on a page, I also would like to include a button or easy way for the customer to copy the code to the clipboard.

Here are two examples: https://stripe.com/docs/billing/subscriptions/checkout/fixed-price
(more fancy than what I need, I don’t need the customer to select the language)

Is there something like codemirror or a way of configuring a textarea or paragraph to display code?
https://codemirror.net/index.html

One more example…https://prismjs.com/

Thanks! Ed.

#2

Hello,
You can use the <pre> tags to display code content on your page.
Example:

<pre>
    <code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
    </code>
</pre>

results in:

    <p>Sample text here...</p>
<p>And another line of sample text here...</p>

With Bootsrtap 4 you can optionally add the .pre-scrollable class, which will set a max-height of 340px and provide a y-axis scrollbar.

As for the copy to clipboard option, you can either write the code yourself - there are many tutorials out there providing custom js code for this or use a library like: https://clipboardjs.com/

1 Like
#3

A method of copying to the clipboard was included in this thread (but not offering all the options of the library @Teodor mentioned).

1 Like
#4

Thanks, that worked!

I used: https://websemantics.uk/tools/escaping-html/ to make the process of converting the code to html friendly formatting.

Next step, copy to clipboard, will look at the suggestions above.