Code blocks truncated text

Hello @max2k,

Code blocks should work normally on the AMP, Are you using any plugin to add code blocks on your site?

I see that on AMP pages the lines are truncated and part of the text is not visible.

Can you please make sure that you have CSS property overflow:auto for <code> or container of <code>
this will enable a horizontal scrollbar for your code block and the user can scroll horizontally to view the rest of the code, Also reducing font-size might help.

please share the URL of the page you are facing issues with along with site health information using this form so we can assist you better.

>>Are you using any plugin to add code blocks on your site?
No. It’s the default WordPress editor.

>>Can you please make sure that you have CSS property..
This should be there by default? I didn’t modify any CSS/JS code. It’s a test site with only AMP plugin active.

I submitted the google form so you can take a look.
Thank you.

Thanks for the URL and info I see you are using reader mode with the legacy theme. if you are planning on using legacy theme you may want to refer to our guide and modify legacy theme to suit your needs.

Some of the CSS seems to removed while generating the AMP page.The quick fix is to add custom CSS with amp_post_template_css hook

You may use the following code snippet in the custom plugin or child themes function.php

add_action(
	'amp_post_template_css',
	function() {
		// only CSS here please...
		?>
		pre.wp-block-code {
			line-height:1.2;
			overflow:auto;
		}
		<?php
	}
);

Great! Thank you for the details and the code Milind.