How to Change View of Coding Block in WordPress?

Problem

Many times a good WordPress theme does not render code properly. There are problems like too big font making it harder to read the text. I use StackEdit to prepare posts and publish to my blog.

Solution

There is a way to solve this problem with custom CSS.

Description

The posting source is in Markdown. StackEdit translates MarkDown to HTML and posts to the destination. There is not much I could do with the Markdown. However, the theme on the WordPress blog allows me to set a CSS for particular content.
The code blocks are translated to pre blocks in the HTML. So adding a custom rendering for pre block should fix the problem.
I found a CSS snippet from https://wp-mix.com/css-style-pre-tags/.

pre {
	box-sizing: border-box;
	width: 100%;
	padding: 0;
	margin: 0;
	overflow: auto;
	overflow-y: hidden;
	font-size: 12px;
	line-height: 20px;
	background: #efefef;
	border: 1px solid #777;
	background: url('lines.png') repeat 0 0;
	padding: 10px;
	color: #333;
}

Another good reference is https://perishablepress.com/perfect-pre-tags/

This made the code look much much better.

Written with StackEdit.

Advertisements

How to Quickly Find WordAds Earning for WordPress Blog?

How to Quickly Find WordAds Earning for WordPress Blog?

WordAds earning is revealed after the third week of the next month. The earning of January 2019 would come by Feb 21st or later.

However, there is a quicker way!

This method is applicable for WordPress hosted blogs.

Steps

Wordpress Blog Earning

Summary

This page has detailed information on earnings and ads served on your website. You need not wait for three weeks anymore now :).