Monday, February 22, 2016

Easy, attractive code formatting with CSS

Today I found myself wanting to format some text in a simple HTML/CSS page as inline code, as is seen on Stack Exchange. After just a tiny bit of fiddling around, I got a very nice CSS style working:

.code {
 background-color: rgb(230, 230, 230);
 border-color: rgb(180, 180, 180);
 border-radius: 3px;
 border-width: 1px;
 font-family: Consolas, "Lucida Console", "Courier New", monospace
 padding: 2px;
}

Text formatted with that style (via <span class="code">) gets set apart from the rest of the page with a slightly distinct background color and a rounded border. The padding makes sure that the first and last characters aren't right up against the border.

No comments:

Post a Comment