+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: Python (https://www.sickgaming.net/forum-83.html)
+--- Thread: [Tut] How to Increase the Font Size on the WordPress Plugin Enlighter? (/thread-98128.html)
[Tut] How to Increase the Font Size on the WordPress Plugin Enlighter? - xSicKxBot - 11-06-2020
How to Increase the Font Size on the WordPress Plugin Enlighter?
<div><p>Do you use the awesome WordPress plugin “<a href="https://wordpress.org/plugins/enlighter/" target="_blank" rel="noreferrer noopener" title="https://wordpress.org/plugins/enlighter/">Enlighter</a>” to embed code in your WordPress site like this?</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">print('hello world!')</pre>
<p>If you’re like me, you want to be able to customize the style (such as font size) globally—not locally for each individual code snippet. </p>
<p><em><strong>Problem</strong>: How to increase the font size of the Enlighter WordPress plugin?</em></p>
<p class="has-pale-cyan-blue-background-color has-background"><strong>To increase the font size globally, you need to complete the following steps:</strong></p>
<ul class="has-pale-cyan-blue-background-color has-background">
<li>Open your WordPress editor.</li>
<li>Go to <code>Appearance > Customize > CSS</code> in your WordPress editor.</li>
<li>Copy the following snippet into your CSS file: </li>
</ul>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">.enlighter-t-bootstrap4 .enlighter span{
font-size: 16px;
}</pre>
<p>Note that you can change the font-size to <strong>15px</strong>, <strong>17px</strong>, or even <strong>20px</strong>—as you like! Also note that if you use another theme/style for your embedded code than <code>bootstrap4</code>, you need to set the CSS selector accordingly. </p>
<p>For example:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">.enlighter-t-wpcustom .enlighter span{
font-size: 20px;
}</pre>
<p>This would change the font size of all Enlighter code environments that use the custom theme. </p>
<p>Here’s how this may look in practice:</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" width="1024" height="485" src="https://blog.finxter.com/wp-content/uploads/2020/11/image-3-1024x485.png" alt="Enlighter change font size WordPress blog" class="wp-image-16410" srcset="https://blog.finxter.com/wp-content/uploads/2020/11/image-3.png 1024w, https://blog.finxter.com/wp-content/uploads/2020/11/image-3-300x142.png 300w, https://blog.finxter.com/wp-content/uploads/2020/11/image-3-768x364.png 768w, https://blog.finxter.com/wp-content/uploads/2020/11/image-3-1536x728.png 1536w, https://blog.finxter.com/wp-content/uploads/2020/11/image-3-150x71.png 150w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>Ah, yes—if you want to learn Python, don’t forget to download our free cheat sheets: <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f642.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
<p>The post <a href="https://blog.finxter.com/how-to-increase-the-font-size-on-the-wordpress-plugin-enlighter/" target="_blank" rel="noopener noreferrer">How to Increase the Font Size on the WordPress Plugin Enlighter?</a> first appeared on <a href="https://blog.finxter.com/" target="_blank" rel="noopener noreferrer">Finxter</a>.</p>
</div>
https://www.sickgaming.net/blog/2020/11/05/how-to-increase-the-font-size-on-the-wordpress-plugin-enlighter/