SimpleMDE\EasyMDE render custom code outside pre code

Question

I use EasyMDE (a fork of SimpleMDE) to display a Markdown editor on a web page. I like to add some custom controls and related HTML renders. For example, I like to add a callout like

So, I added this code

const easyMDE = new EasyMDE({
    element: document.getElementById(elementId),
    hideIcons: options.hideIcons,
    showIcons: options.showIcons,
    renderingConfig: {
        singleLineBreaks: false,
        codeSyntaxHighlighting: false,
        markedOptions: {
            langPrefix: "",
            highlight: function (code, lang) {
                if (lang === "mermaid" && mermaidInstalled) {
                    return mermaid.mermaidAPI.render('mermaid0', code, undefined);
                }
                else if (lang === "code" && hljsInstalled) {
                    const language = hljs.getLanguage(lang) ? lang : 'plaintext';
                    return hljs.highlight(code, { language }).value;
                }
                else if (lang === "tip") {
                    return '<div class="alert callout tip"><p class="title">' +
                        '<span class="icon icon-tip"></span></p><p>' +
                        code + '</p></div>';
                }
                else
                    return code;
            }
        }
    }
}

The render is quite similar to what I expected but the

because the HTML for this code is contained in a pre and code tags

pre {
  display: block;
  font-size: 87.5%;
  color: #212529;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

.alert.callout.tip {
  border-left-color: #28a745 !important;
}

.alert.callout {
  border: 1px solid #eee;
  border-left-width: .25rem;
  border-radius: .25rem;
  background: var(--background);
}

.alert {
  display: block;
  position: relative;
  word-wrap: break-word;
  word-break: break-word;
  padding: .75rem 1.25rem !important;
  margin-bottom: 1rem !important;
}

.alert.callout.tip .title {
  color: #28a745;
}

.alert .title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-weight: 600;
  margin: 0;
}

.alert.callout.tip .icon-tip {
  background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 352 512' fill='%2328a745' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0026.64 14.28h61.71a31.99 31.99 0 0026.64-14.28l17.09-25.69a31.989 31.989 0 005.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z'/%3E%3C/svg%3E);
}

.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  margin-right: .5rem;
}

<pre>
<code class="tip">
       <div class="alert callout tip">
          <p class="title"><span class="icon icon-tip"></span></p>
          <p>This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. This is a test for tips. </p>
       </div>
    </code>
</pre>

How can I limit the alert to be maximum width like the free space on the page and the words in the new line? Or remove the pre and code tags from the render?