Too much of line-heigth on code blocks when using prismjs

[matthiasguentert]

When adding blocks of code the line-heigth seems off, see the following example. 😣

You can find the post here for debugging and examination purposes. This is what my code injection section looks like

Site header

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism.min.css" integrity="sha512-SR4UXeuuhpoxkcnSd08+IU7VYA80Kfv9dyzEdM/gaRe+UwZn50BsQT6ZME/3vtIqeoxCBZQek6pfx2Q8QPszNg==" crossorigin="anonymous" />
<script>
  var ghosthunter_key = 'xxyyzz';
  var ghost_root_url = '/ghost/api/v2';
</script>
<style>
  :root {
    --color-primary: #8dd6f9;
    --color-primary-active: #1d78c1;
  }
</style>

Site footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js" integrity="sha512-rYNMWcr8EuYc/6mSBu0wD+hSoA4KkHvYRlmJEJGQI4bsho0OiX8fPOVB822QQZizkTUdkUCnJLnN8SAUBg9y9w==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-csharp.min.js" integrity="sha512-n7bT9YZh5mnO05wGpW6qv6+ERpH7EMsmUW2AzQ3XEjS+NaaT59irhobjslgHpfaZxqLozDwenmVsy2xukIlwuA==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-markup.min.js" integrity="sha512-UBNbEQNZ6DQ6nAsYq09Sted4S3MMDGGMnZliP3H1ZxDhYq9MpEUFA7c2UWCiymRz5cakVOzs1inynIUhozX0lQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-powershell.min.js" integrity="sha512-ZlWzBAoXDVPhS3+55H7GePZ1xHEuvqJxmLLsoShXwwjrMwczP2VlfFnLEhuAWmbJxJlHENSSneXR7BbHbA/s1Q==" crossorigin="anonymous"></script>

Thanks in advance!

[zutrinken]

Why are you using another code highlight function? There's already one built in. You can skip at least prism.min.css ... that makes things look wired.

I see you already set the line-height to 1.3em ... it's intended to be larger for readability. If it has to be smaller, I recommend using at least 1.66667em (25px).