How to insert a code box in RH

Do test in various browsers as RoboHelp is strictly HTML5 and CSS3 compliant. Some of that code isn't. Doesn't mean it won't work, just that it needs thorough testing.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

Hi everyone!,

I'm writing to let you know that I found the html code to insert a code box with a copy botton, here is the code I tested:
<div class="code-box">
<div class="code-header"><span class="code-title">HTML</span><button class="copy-button"><svg class="copy-icon" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
<path d="M384 336l-192 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l140.1 0L400 115.9 400 320c0 8.8-7.2 16-16 16zM192 384l192 0c35.3 0 64-28.7 64-64l0-204.1c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1L192 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-32-48 0 0 32c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l32 0 0-48-32 0z"></path>
</svg></button></div>
<div class="separator"> </div>
<pre> <code>
function myFunction() {
// ...
}
</code>
</pre>
</div>

and the css code
<style type="text/css">

/*<![CDATA[*/
.code-box {
background-color: #f8f9fa;
/*border: 1px solid #ced4da;*/
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
overflow: hidden;
}
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.code-title {
font-weight: bold;
}
.copy-button {
background-color: transparent;
border: none;
cursor: pointer;
padding: 4px;
border-radius: 4px;
}
.copy-button svg {
width: 16px;
height: 16px;
}
.code-box pre {
margin: 0;
white-space: pre-wrap;
}
.copy-button:active svg {
transform: scale(0.8);
}
.separator {
height: 3px;
background-color: white;
margin: 8px 0;
}
/*]]>*/
</style>

There is nothing built-in but the new UI versions are HTML5 and CSS3 compliant. That means that in theory any compliant code should work. I googled "code box in HTML5" and got this one and others.

https://www.shecodes.io/athena/9580-how-to-create-a-box-with-html-and-css#:~:text=You%20can%20add%20a%20box,padding%2C%20margin%2C%20and%20more.

See if that helps. Let us know.

In Classic versions there was a way of making a click in the code box select the code. You may be able to find that too.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.