Can we configure the Output or Source tab to display HAML/Other Coding Language instead HTML

[caseywong]

For our Lookbook library, we are trying to render our partials as HAML instead of HTML so that our developers can copy the HAML directly instead of being pointed to the file where the partial lives.

We've been combing through the documentation and have been discovered the ways in which we can detect the source language and source. However, when we render the source, it renders the source inside of the preview ie.

render "atoms/button", button_text: "Primary Button", button_url: "#", theme: "primary", disable: false, aria_label: "button primary

However, we would like to access the HAML which looks like:

= link_to button_text, button_url, class: "btn btn-#{theme} #{disable ? "disabled" : "" }", aria: { label: aria_label, role: "button" }

Is there a way we can configure with the main preview tabs or the secondary preview tabs (ie. Source) to display our source code in HAML?

[allmarkedup]

Hey @caseywong, sorry for the slow response.

I'm not sure I'm 100% clear on what you need here so just to check - is the HAML you want developers to be able to copy the contents of the "atoms/button" partial?

If so, out of interest why would you not want them to copy the code to render the partial rather than copy and paste the partial content? That seems to defeat the point of creating the component partial in the first place... unless I'm missing something (which I probably am!)

Regardless, in theory it should be possible to add a custom inspector panel to display the contents of the partial that is being rendered. If you let me know if I've understood your needs right then I'll see if I can put together some example code to get you started.