Change style of inline code block on WordPress

Kris 0
Viewed 20

I'd like to change the style of the WordPress inline code block on my blog. The original code block makes it seem that there is 3 separate commands instead of one command. How could I change the code block to look more like the following:

enter image description here

There is a way to view the properties of the inline code block to add or changes some of the properties. However, I don't know which properties to change to make it appear how I would like. I loaded the page and did an inspect and this is what the CSS style looks like for the inline code block:

code {
font-family: Consolas, "Liberation Mono", Courier, monospace;
font-weight: normal;
font-size: 1em;
color: #333;
background-color: rgba(0, 0, 0, 0.1);
border-width: 1px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.1);
-webkit-border-radius: 2px;
border-radius: 2px;
padding: 0.125rem 0.3125rem 0.0625rem;
}

How could I change the properties to get the outcome I am looking for?

codeblocks wordpress css
1 Answers

display: block

code {
font-family: Consolas, "Liberation Mono", Courier, monospace;
font-weight: normal;
font-size: 1em;
color: #333;
background-color: rgba(0, 0, 0, 0.1);
border-width: 1px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.1);
-webkit-border-radius: 2px;
border-radius: 2px;
padding: 0.125rem 0.3125rem 0.0625rem;


display: block;
}
<h1>ehrh</h1>
<code>
hello world hello world hello world  hello world hello world hello world  hello world
hello world hello world hello world  hello world hello world hello world  hello world
</code>

IT goldman0
Related