I like to display keyboard entries, code examples and sample outputs with distinctive formatting using the <pre>, <kbd>, <code>, and <samp> tags. I also like this formatting to appear uniform across the whole web site

The easiest way to achieve this is to modify the main WordPress CSS style sheet. As admin user select Apearance > Editor > Stylesheet (style.css) and edit the styles according to your preferences, for example:

.entry-content p,
.entry-summary p,
.comment-content p,
.mu_register p {
/* ZJL
	margin: 0 0 24px;
	margin: 0 0 1.714285714rem;
*/
	margin: 12px 0 12px;
	margin: 0.857142857rem 0 0.857142857rem;
	line-height: 1.714285714;
}
...
/* ZJL
.entry-content pre,
.comment-content pre {
	border: 1px solid #ededed;
	color: #666;
	font-family: Consolas, Monaco, Lucida Console, monospace;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.714285714;
	margin: 24px 0;
	margin: 1.714285714rem 0;
	overflow: auto;
	padding: 24px;
	padding: 1.714285714rem;
}
.entry-content pre code,
.comment-content pre code {
	display: block;
}
*/
.entry-content pre,
.comment-content pre {
	border: 1px solid #ededed;
	background-color: #404040;
	color: #666;
	font-family: Consolas, Monaco, Lucida Console, monospace;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.714285714;
	margin: 0 10px;
	margin: 0 0.714285714rem;
	padding: 2px 5px;
	padding: 0.142857143rem 0.357142857rem;
	display: block;
	width: auto;
	overflow: auto;
	white-space: pre;
	word-wrap: normal;
	/* max-height: 600px; */
}
.entry-content pre kbd,
.comment-content pre kbd {
	color: #00ff00;
}
.entry-content pre code,
.comment-content pre code {
	color: #00c0a0;
}
.entry-content pre samp,
.comment-content pre samp {
	color: #ff6600;
}

Click Update File when finished.