please I am trying to recreate these elements using “…” tags but it doesnt work
I also tried using “…” tag, but it brings error message.
please can someone help me with the appropriate html element to use. thanks
I’m not sure if I’m understanding your question. If you’re trying to figure out how to do this and place code in a highlighted box
like this
That is referred to as blockquote. To blockquote in line like this simply place a backtick (grave accent) in front of and behind the text you’d like highlighted. The backtick/grave accent on an American English keyboard is the same key we hold shift and press to produce the Tilde ~. The key directly under the ESC key, above the Tab key.
To place code in a blockquote box type 3 backticks ``` then your code then 3 more backticks.
I tried that, it still didn’t work
These are terms used in flexbox to associate certain notions about that display concept, they are not html elements, i am not sure what you are asking or trying to achieve?
Or do you mean the grey colored boxes containing text? Those can eaither be <span>, or <code>, or another inline element which you cna apply custom styles on.
Your question is not clear. What is it you’re trying to do?
Create the effect you highlighted in the screenshot in your own web page project?
Create those effects here on this site, as I guessed?
If you mean you’re trying to do this and
this
Here is how you do this:
Here is how to blockquote code:
<html>
<title>Example of Code BlockQuote</title>
<head></head>
<body>
Text text website text.
</body>
</html>
Screenshot of how to create the above:
Look at the preview. After we hit reply or we’re typing a new topic there’s the text field on the left we’re typing in and a preview pane on the right that displays what the text we’re typing looks like on the right.
If there’s a tooltip message displaying in the preview pane on the right when you’re typing hit the X and close it so you can preview your text before posting it.
HI @gosijay1 !
Have you tried this suggestion?
You can add a class to the code elements and the css would be very minimal. You can achieve this result with as little as two css properties.
What will help people in the future is providing more context.
For example, you could have said the following which would yield more results from the community.
"I am working on the technical document page and I am trying to highlight some inline elements with a grey background like seen in the screenshot. I am not sure how to go about it using html and css. Is there a specific html tag I should use? Here is my codepen of what I have tried so far. "
By providing more context, we will be able to understand your issue better and help you out.
Hope that helps! 
1 Like
Also, just for reference, the forum uses markdown and the backticks syntax is transformed to HTML <code> elements.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.