Showing different or no markup for each item, rather than just duplicating that markup.

[BeauKelsey]

I know this sounds weird. I want to be able to have separate control over the item preview and the item code.

Say I have "button.html", the item code get's escaped because I am referencing this whole button.html file with {{{material @key @root}}}. How can I place the below code in my button material html file and achieve the expected results?

I also thought about having a separate html file for item previews and item code but that seems like it could get out hand.

<div class="f-item-preview">
    <button class="lfy-button">Take a payment</button>
</div>

<div class="f-item-code f-item-hidden" data-f-toggle="code">
    <pre><code class="language-markup">
    <button class="lfy-button">Take a payment</button>
    </code></pre>
</div> 

[LukeAskew]

You could define a property in your front-matter and change the material rendering to use that property rather than the "material" code.

I think something like this would work:

---
preview: |
  <SomeThing
    foo={'bar'}
  />
---

<div class="something">
  ...
</div>

[BeauKelsey]

Excellent! I’ll try it! Thank you!

On Apr 6, 2017, at 7:16 AM, Luke Askew notifications@github.com wrote:

You could define a property in your front-matter and change the material rendering to use that property rather than the "material" code.

I think something like this would work:

---

preview: | <SomeThing foo={'bar'} />

...

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fbrctr/fabricator/issues/290#issuecomment-292188176, or mute the thread https://github.com/notifications/unsubscribe-auth/AJ_uoJnvFWVcbTaDXbQ-LuAu8QeyRaG-ks5rtPPHgaJpZM4MrvR3.