Hello,
I’m working with components where some part of the text is highlighted:
In term of CSS, it’s easy enough, I have to style every span nested in my heading class.
Now my issue is when I create a component where the text is a property of the component:
How can I wrap some part of this text in a span?
The more I work with components, the less I understand how to make them versatile.
I have this exact same question. I need to wrap into a span a text inside a component to make some custom code work
The simplest native way is to use a rich text property bound to a rich text element, and then restyle a basic style like bold as your highlight.
This approach works in the designer since it doesn’t require any special script-processing, however unfortunately the component user would have to know “one paragraph only, bold the text you want highlighted” something like that.
Other approaches requires some creativity, and the highlighting will only appear in the published site.
SA5 has a Markdown feature which works well for this. You can tag the element in your component for markdown conversion, and then in your component property you can use markdown styling, like
*italics* **bold** ~~strikethrough~~ ==highlight== _underline_
However it is processed with script so you won’t see it in the designer, only in the published site.