We are displaying weekly Youtube sermons in our website as videos.
We would like to also insert “cleaned up” transcripts, using the magic of ChatGPT.
We get a lovely html with print buttons, pdf buttons, style sheet — but cannot figure out how to insert this html document on our Enfold page.

I have tried to use content in Accordion. Have learned that won’t work.

(Obviously, each week transcript will be different, so hoped I could use Advanced Custom Fields to store document info and then display via my custom post template.)

Right now, I am trying Textblock — in Code, not Visual.

I see the document nicely displayed on BACKEND, but on FRONTEND, I do NOT see the document displayed.

Since STYLE was included in the HTML — I moved style out to a Codeblock.

SCRIPT is also in there and I can move it out to another Codeblock.

What is your suggestion to “see” the document on the FRONTEND?

Thanks in Advance…

Below is the attempted code…

`[av_codeblock wrapper_element='' wrapper_element_attributes='' codeblock_type='' alb_description='' id='' custom_class='' template_class='' av_uid='av-mfpdws8b' sc_version='1.0']
<style>
/* ——– Base Styles ——– */<br />
:root {<br />
–bg: #0b0c0f;<br />
–card: #11131a;<br />
–ink: #e8ecf1;<br />
–muted: #aeb7c2;<br />
–accent: #6aa2ff;<br />
–accent-ink: #0b1b3a;<br />
–rule: #1e2330;<br />
}<br />
html, body { height: 100%; }<br />
body {<br />
margin: 0;<br />
background: radial-gradient(1200px 1200px at 10% -10%, #1b2030 0%, var(–bg) 60%);<br />
color: var(–ink);<br />
font: 16px/1.7 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, “Apple Color Emoji”, “Segoe UI Emoji”;<br />
-webkit-font-smoothing: antialiased;<br />
-moz-osx-font-smoothing: grayscale;<br />
}</p>
<p> .wrapper {<br />
max-width: 860px;<br />
margin: 48px auto 96px;<br />
padding: 0 20px;<br />
}</p>
<p> .toolbar {<br />
position: sticky;<br />
top: 0;<br />
z-index: 10;<br />
backdrop-filter: blur(10px);<br />
-webkit-backdrop-filter: blur(10px);<br />
background: color-mix(in srgb, var(–bg) 80%, transparent);<br />
border-bottom: 1px solid var(–rule);<br />
}<br />
.toolbar-inner {<br />
max-width: 860px;<br />
margin: 0 auto;<br />
padding: 10px 20px;<br />
display: flex;<br />
gap: 10px;<br />
align-items: center;<br />
justify-content: flex-end;<br />
}<br />
.btn {<br />
appearance: none;<br />
border: 1px solid var(–rule);<br />
background: linear-gradient(180deg, #1a2233, var(–card));<br />
color: var(–ink);<br />
padding: 10px 14px;<br />
border-radius: 14px;<br />
cursor: pointer;<br />
font-weight: 600;<br />
transition: transform 0.05s ease, box-shadow 0.2s ease, background 0.2s ease;<br />
box-shadow: 0 6px 14px rgba(0,0,0,0.25);<br />
}<br />
.btn:hover { transform: translateY(-1px); }<br />
.btn:active { transform: translateY(0); }<br />
.btn.accent {<br />
border-color: color-mix(in srgb, var(–accent), #000 50%);<br />
background: linear-gradient(180deg, color-mix(in srgb, var(–accent) 50%, #fff 0%), var(–accent-ink));<br />
color: white;<br />
text-shadow: 0 1px 0 rgba(0,0,0,0.35);<br />
}</p>
<p> .card {<br />
background: linear-gradient(180deg, #131827, var(–card));<br />
border: 1px solid var(–rule);<br />
border-radius: 22px;<br />
padding: 28px 28px 36px;<br />
box-shadow: 0 20px 60px rgba(0,0,0,0.35);<br />
}</p>
<p> h1, h2, h3 { line-height: 1.2; margin: 0 0 8px; }<br />
h1 {<br />
font-size: clamp(28px, 4.2vw, 44px);<br />
letter-spacing: -0.02em;<br />
margin-bottom: 12px;<br />
}<br />
.meta { color: var(–muted); margin-bottom: 28px; }</p>
<p> h2 {<br />
font-size: clamp(20px, 2.5vw, 26px);<br />
margin-top: 34px;<br />
}</p>
<p> p { margin: 12px 0; }<br />
ul { margin: 8px 0 16px 24px; }<br />
li { margin: 6px 0; }</p>
<p> blockquote {<br />
margin: 18px 0;<br />
padding: 16px 18px;<br />
border-left: 4px solid var(–accent);<br />
background: color-mix(in srgb, var(–card), #000 8%);<br />
border-radius: 10px;<br />
}<br />
blockquote p { margin: 0; }</p>
<p> hr { border: none; border-top: 1px solid var(–rule); margin: 28px 0; }</p>
<p> .note { color: var(–muted); font-size: 14px; }</p>
<p> /* Drop cap for the opening paragraph */<br />
.lead:first-letter {<br />
float: left;<br />
font-size: 3.2em;<br />
line-height: 0.9;<br />
padding-right: 10px;<br />
margin-top: 6px;<br />
font-weight: 800;<br />
color: var(–accent);<br />
text-shadow: 0 6px 16px rgba(106,162,255,0.35);<br />
}</p>
<p> /* Print styles */<br />
@media print {<br />
body { background: white; color: #111; }<br />
.toolbar { display: none !important; }<br />
.wrapper { margin: 0; max-width: 100%; }<br />
.card { box-shadow: none; border: none; border-radius: 0; padding: 0; }<br />
a { color: black; text-decoration: none; }<br />
.note { color: #444; }<br />
@page { size: A4; margin: 20mm; }<br />
h1 { font-size: 28pt; }<br />
h2 { font-size: 16pt; margin-top: 18pt; }<br />
p, li, blockquote { font-size: 11.5pt; }<br />
blockquote { background: #f6f6f6; border-left-color: #888; }<br />
}<br />
</style>
[/av_codeblock]

[av_textblock fold_type='' fold_height='' fold_more='Read more' fold_less='Read less' fold_text_style='' fold_btn_align='' textblock_styling_align='' textblock_styling='' textblock_styling_gap='' textblock_styling_mobile='' size='' av-desktop-font-size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' padding='' padding_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-padding='' av-mini-padding_sync='true' fold_overlay_color='' fold_text_color='' fold_btn_color='theme-color' fold_btn_bg_color='' fold_btn_font_color='' size-btn-text='' av-desktop-font-size-btn-text='' av-medium-font-size-btn-text='' av-small-font-size-btn-text='' av-mini-font-size-btn-text='' fold_timer='' z_index_fold='' id='' custom_class='' template_class='' av_uid='av-mfpdtbrg' sc_version='1.0' admin_preview_bg='']
<div class=”toolbar” aria-label=”Document tools”>
<div class=”toolbar-inner”><button class=”btn” title=”Send to a printer”>
️ Print
</button>
<button class=”btn accent” title=”Use your browser’s Save as PDF option in the dialog”>
Download PDF
</button></div>
</div>
<div class=”wrapper”><article id=”content” class=”card”><header>
<h1>Sermon: “You Are the Light of the World”</h1>
<div class=”meta”>Text: Matthew 5:14–16</div>
</header>
<p class=”lead”>So, you might have noticed the theme. Send the Light. Thy Word is a lamp. There’s definitely a theme going here.</p>
We are continuing through the best sermon ever preached by the greatest preacher ever. We have seen Jesus giving assurances to His followers in the Beatitudes—letting them know that His followers are blessed.

Last week, we began looking at the section where Jesus tells His followers that they are salt and light.
<h2>Salt</h2>
We learned a few things about salt in Jesus’ day. Salt was precious. When Jesus said, “Ye are the salt of the earth,” His disciples understood the value. Salt was so valuable it was sometimes used as payment for soldiers.

Its value came from its purpose:

• Preservative – As salt, we preserve the holiness of God and His Word in the world.
• Purifier – Salt was used as a cleansing agent; so are we in the world.
• Penetrating – Salt works its way in. We are called to go into all the world with the gospel.
• Creates thirst – Salt makes people thirsty. Do we, by our lives, make people thirst for the living water that is Christ?

Jesus also warned of useless salt: “If the salt has lost its savour… it is good for nothing, but to be cast out and trodden under foot of men.” Notice, Jesus never challenged us to be salt or light. He simply said, you are.

<hr />

<h2>Light</h2>

Matthew 5:14–16 — “Ye are the light of the world. A city that is set on a hill cannot be hid. Neither do men light a candle and put it under a bushel, but on a candlestick, and it giveth light unto all that are in the house. Let your light so shine before men that they may see your good works and glorify your Father which is in heaven.”

What a title. What a privilege—that Jesus would say we are the light of the world. But what does He mean?
<h3>Jesus, the True Light</h3>
John wrote of the Light in John 1:4–9: “In Him was life, and the life was the light of men. And the light shineth in darkness, and the darkness comprehended it not… That was the true Light, which lighteth every man that cometh into the world.” Of course, John was speaking of Jesus.

Jesus confirmed it Himself in John 8:12—“I am the light of the world.” Again, in John 9:5—“As long as I am in the world, I am the light of the world.” But then Jesus turned to His disciples and said, “Ye are the light of the world.”
<h3>The Nature of Our Light</h3>

• It is personal – Jesus has given every believer this light. He didn’t say we might be light someday; He said we are light.
• It is His light in us – We are not the source. Jesus is. We are the lamp, the candle, the bulb through which His light shines.
• It is powerful – Even the smallest light conquers darkness. A single match in a dark cave changes everything.

Paul reminds us in 2 Corinthians 4:6 that God “commanded the light to shine out of darkness” into our hearts. Philippians 2:15 calls us to shine as lights “in the midst of a crooked and perverse nation.”

The tragedy is that much of the darkness in our world exists because Christians have hidden their light.
<h3>The Purpose of Our Light</h3>

• To shine – Light is not made to be hidden under a bushel but set on a candlestick.
• To expose – Light reveals what is hidden in darkness, including sin.
• To reflect – Like the moon reflects the sun, we reflect the Son.
• To guide – Like runway lights, a lighthouse, or a warning sign, our light points others to safety and to the Father through Christ.

<h3>The Result of Our Light</h3>
Jesus says, “Let your light so shine before men that they may see your good works and glorify your Father which is in heaven.” Our light draws others to God. Our good works should point people to Him, not to ourselves. Salvation is mankind’s greatest need—and our shining light directs people to Christ.
<h2>Closing Challenge</h2>
Light always overcomes darkness, but it must shine to make a difference. Is your light shining for Jesus? Can you truly sing, “This little light of mine, I’m going to let it shine”? Or are you hiding your light under a bushel?

If you are trusting in Christ, you have His light. Let it shine.

Prayer — “Lord, we thank You for Your Word this morning and the encouragement that we are the light of the world. Help us not to cover or hide the light, but to let it shine, that others may see our good works and glorify our Father in heaven. Amen.”

<p class=”note”>Tip: Use Print to send directly to a printer, or choose Save as PDF in the print dialog to download a PDF copy.</p>

</article></div>
<script>
// Optionally hide buttons when printing (extra safety for non-supporting browsers)
window.addEventListener(‘beforeprint’, () => {
document.querySelector(‘.toolbar’)?.setAttribute(‘data-hidden’, ‘true’);
});
window.addEventListener(‘afterprint’, () => {
document.querySelector(‘.toolbar’)?.removeAttribute(‘data-hidden’);
});
</script>
[/av_textblock]