WordPress plugin<\/a> which can be installed for basic setup, then the latest posts from the blog are imported and converted into instant articles.<\/p>\nConverted? Yup Instant articles have a different markup. Only a few HTML elements are supported. Okay, all good and articles are imported but there were few issues.<\/p>\n
Only H1<\/code> and H2<\/code> are supported in Heading elements. Other elements like H3, H4<\/code> will be converted into H2<\/code> while displaying the article.<\/p>\nThis is all fine but the code blocks were completely ignored and shown as plain text! Instant articles ignore code<\/code>, pre<\/code> elements and show them as plain text.<\/p>\nThis is a coding blog and displaying code blocks is very important. I tried blockquote and few other elements supported by instant articles but nothing worked \ud83d\ude1e<\/p>\n
Finally, After reading the documentation<\/a> clearly I was able to display code blocks clearly in this way.<\/p>\nThere’s an element called Figure<\/code> in which an Iframe<\/code> can be embedded which can have any html elements so I placed a pre<\/code> block inside the Iframe and styled it a bit and there’s our code block!<\/p>\n\r\n