My site shows raw code instead of rendering it

[kemalgencay]

Can any one help me please:

I wanted to do similar "quote" example:
https://htmldog.com/examples/pullquotes2/
But my site shows the raw code instead:
https://kemalgencay.com/yazi/05/quote
I did not understand what I am doing wrong.
My repo is:https://github.com/kemalgencay/yeni

Regards

[wooorm]

You seem to be using Gatsby. It’s better to ask Gatsby people about Gatsby questions.

[kemalgencay]

I did, waiting for them to answer since 3 days

[ChristianMurphy]

Welcome @kemalgencay!

The issue is the syntax you used in your post: https://github.com/kemalgencay/yeni/blob/4a89b529c6170ae3b2eb93a89db64551544730fb/content/yazi/05/quote.mdx
Markdown and MDX treat significantly indented content as a code block, if you don't want it to be a codeblock, start content without indent.

To learn more about how markdown and MDX work, checkout https://commonmark.org/help/ and https://mdxjs.com/docs/what-is-mdx/#mdx-syntax

Tying that back to your example post:

your current MDX code, with in a indented code block (click to expand)

---
title: "Quote example"
date: "2022-12-22"
variant: yazi
---

    	body {
    		font: 13px/1.5 arial, helvetica, sans-serif;
    	}
    	article {
    		width: 500px;
    	}
    	.pquote {
    		float: right;
    		width: 200px;
    		color: #030;
    		font-size: 26px;
    		line-height: 0.9;
    		font-style: italic;
    		padding: 13px;
    	}
    	blockquote {
    		margin: 0;
    	}
    	.pquote p:first-letter {
    		font-size: 39px;
    		font-weight: bold;
    	}

    <article>
    	<p>If ever there was evidence of God, the humble pea is it.</p>
    	<p>Mother Nature has never created something of such perfection, something that takes Darwin's theory of evolution to the extent that a natural element can, over millions of years, evolve into something so flawless.</p>

    	<aside class="pquote">
    		<blockquote>
    			<p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    		</blockquote>
    	</aside>

    	<p>The green seed of the white-flowering climbing leguminous papilionaceous plant, pisum sativum, has become a dining-table favourite for good reason.</p>
    	<p>The perfect accompaniment to any meal, the diminutive spherical vegetable brings joy to billions worldwide, be they fresh, frozen, canned or dried.</p>
    	<p>Even leaving aside the astounding nutritional package, the taste explosion and texture of a well cooked pea is undeniably enough to award this deceptively simple seed the gold-medal of the foodstuff Olympics.</p>
    	<p>There is debate surrounding the tampering of the form of the original spherical vegetable. The question as to whether the 'mushy' pea is sacrilege or an innovative approach to re-package the perfect product is a sensitive issue. A similar argument arises when approaching the relatively new craze of mangetout. In-depth study is required, but for now it is too early to assess the true importance of this baby pea pod.</p>
    	<p>In its original form, the pea is a giant amongst food products and a deity of the vegetable world. It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    </article>

how to render article as a tag in MDX (click to expand)

---
title: "Quote example"
date: "2022-12-22"
variant: yazi
---
body {
    font: 13px/1.5 arial, helvetica, sans-serif;
}
article {
    width: 500px;
}
.pquote {
    float: right;
    width: 200px;
    color: #030;
    font-size: 26px;
    line-height: 0.9;
    font-style: italic;
    padding: 13px;
}
blockquote {
    margin: 0;
}
.pquote p:first-letter {
    font-size: 39px;
    font-weight: bold;
}

<article>
    <p>If ever there was evidence of God, the humble pea is it.</p>
    <p>Mother Nature has never created something of such perfection, something that takes Darwin's theory of evolution to the extent that a natural element can, over millions of years, evolve into something so flawless.</p>

    <aside class="pquote">
        <blockquote>
            <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
        </blockquote>
    </aside>

    <p>The green seed of the white-flowering climbing leguminous papilionaceous plant, pisum sativum, has become a dining-table favourite for good reason.</p>
    <p>The perfect accompaniment to any meal, the diminutive spherical vegetable brings joy to billions worldwide, be they fresh, frozen, canned or dried.</p>
    <p>Even leaving aside the astounding nutritional package, the taste explosion and texture of a well cooked pea is undeniably enough to award this deceptively simple seed the gold-medal of the foodstuff Olympics.</p>
    <p>There is debate surrounding the tampering of the form of the original spherical vegetable. The question as to whether the 'mushy' pea is sacrilege or an innovative approach to re-package the perfect product is a sensitive issue. A similar argument arises when approaching the relatively new craze of mangetout. In-depth study is required, but for now it is too early to assess the true importance of this baby pea pod.</p>
    <p>In its original form, the pea is a giant amongst food products and a deity of the vegetable world. It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
</article>

Some other general recommendations when authoring content:

• Styles need to be in a style tag or stylesheet, the CSS you have floating in the content will not style the page
• Avoid mixing tabs and spaces as indentation, choose one or the other and stick with it
• MDX is designed more mixing JSX into Markdown, you don't appear to be using and JSX elements or blocks. Using plain Markdown (a .md file) may work just as well for your content, and be easier to work with.

[kemalgencay]

Thank you very much Regards

…

On Fri, Jan 13, 2023 at 6:04 PM Christian Murphy ***@***.***> wrote: Welcome @kemalgencay <https://github.com/kemalgencay>! The issue is the syntax you used in your post: https://github.com/kemalgencay/yeni/blob/4a89b529c6170ae3b2eb93a89db64551544730fb/content/yazi/05/quote.mdx Markdown and MDX treat significantly indented content as a code block, if you don't want it to be a codeblock, start content without indent. your current MDX code, with in a indented code block ---title: "Quote example"date: "2022-12-22"variant: yazi--- body { font: 13px/1.5 arial, helvetica, sans-serif; } article { width: 500px; } .pquote { float: right; width: 200px; color: #30; font-size: 26px; line-height: 0.9; font-style: italic; padding: 13px; } blockquote { margin: 0; } .pquote p:first-letter { font-size: 39px; font-weight: bold; } <article> <p>If ever there was evidence of God, the humble pea is it.</p> <p>Mother Nature has never created something of such perfection, something that takes Darwin's theory of evolution to the extent that a natural element can, over millions of years, evolve into something so flawless.</p> <aside class="pquote"> <blockquote> <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p> </blockquote> </aside> <p>The green seed of the white-flowering climbing leguminous papilionaceous plant, pisum sativum, has become a dining-table favourite for good reason.</p> <p>The perfect accompaniment to any meal, the diminutive spherical vegetable brings joy to billions worldwide, be they fresh, frozen, canned or dried.</p> <p>Even leaving aside the astounding nutritional package, the taste explosion and texture of a well cooked pea is undeniably enough to award this deceptively simple seed the gold-medal of the foodstuff Olympics.</p> <p>There is debate surrounding the tampering of the form of the original spherical vegetable. The question as to whether the 'mushy' pea is sacrilege or an innovative approach to re-package the perfect product is a sensitive issue. A similar argument arises when approaching the relatively new craze of mangetout. In-depth study is required, but for now it is too early to assess the true importance of this baby pea pod.</p> <p>In its original form, the pea is a giant amongst food products and a deity of the vegetable world. It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p> </article> how to render article as a tag in MDX ---title: "Quote example"date: "2022-12-22"variant: yazi--- body { font: 13px/1.5 arial, helvetica, sans-serif; } article { width: 500px; } .pquote { float: right; width: 200px; color: #30; font-size: 26px; line-height: 0.9; font-style: italic; padding: 13px; } blockquote { margin: 0; } .pquote p:first-letter { font-size: 39px; font-weight: bold; } <article> <p>If ever there was evidence of God, the humble pea is it.</p> <p>Mother Nature has never created something of such perfection, something that takes Darwin's theory of evolution to the extent that a natural element can, over millions of years, evolve into something so flawless.</p> <aside class="pquote"> <blockquote> <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p> </blockquote> </aside> <p>The green seed of the white-flowering climbing leguminous papilionaceous plant, pisum sativum, has become a dining-table favourite for good reason.</p> <p>The perfect accompaniment to any meal, the diminutive spherical vegetable brings joy to billions worldwide, be they fresh, frozen, canned or dried.</p> <p>Even leaving aside the astounding nutritional package, the taste explosion and texture of a well cooked pea is undeniably enough to award this deceptively simple seed the gold-medal of the foodstuff Olympics.</p> <p>There is debate surrounding the tampering of the form of the original spherical vegetable. The question as to whether the 'mushy' pea is sacrilege or an innovative approach to re-package the perfect product is a sensitive issue. A similar argument arises when approaching the relatively new craze of mangetout. In-depth study is required, but for now it is too early to assess the true importance of this baby pea pod.</p> <p>In its original form, the pea is a giant amongst food products and a deity of the vegetable world. It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p> </article> Some other general recommendations when authoring content: - Styles need to be in a style tag or stylesheet, the CSS you have floating in the content will not style the page - Avoid mixing tabs and spaces as indentation - MDX is designed more mixing JSX into Markdown, you don't appear to be using and JSX elements or blocks. Using plain Markdown (a .md file) may work just as well for your content, and be easier to work with. — Reply to this email directly, view it on GitHub <#2222 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJEFR2H5UPCOTPGKJ6DJPLLWSFVIBANCNFSM6AAAAAAT2CZJ5A> . You are receiving this because you were mentioned.Message ID: ***@***.***>