I’m using casper theme in my ghost blog.
Here is my url - shifatearman.com
I’ve added the following code in my site footer using code injection option for formatting my code-
After clicking save, the changes take place. Here is an screenshot.
The problem is - the font size of text inside my code block seem to be larger than normal. I didn’t want to increase the font size.
How can I reduce the font size?
Could you turn off the private mode so we can see your issue on the site? It’ll help us to debug it better
Oh sorry. Should have noticed it earlier. I turned off the private mode.
This piece of CSS should reduce the font size within your code blocks:
<style>
pre[class*="language-"] {
font-size: 0.75em;
}
</style>
Drop that into your site header code injection area
I dropped the code in the header section of code injection area. But it’s still the same.
Here is my footer -
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/prism.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/plugins/line-numbers/prism-line-numbers.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism-okaidia.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-csharp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-clike.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-markdown.min.js"></script>
Try putting it after them in the footer code injection area.
PS. You’ve put 0.1em
for the size, I assume you don’t want it that small
1 Like
It worked. Thanks a lot David. Thanks.
1 Like