Re: Copying and Pasting HTML Code from Marketo Template into Brackets (code editor); colors are not displaying correctly in editor

Danielle_Wong · ‎08-09-2017

I like to use Brackets (third-party code editor) because it shows live preview of my changes and also word wraps the lines of code. However, the background colors are never correct.

Anyone ever experience this? If so, is there a fix?

Jim_Thao7 · ‎08-10-2017

I see. This is probably because the ${Section3BtnBGColor} references are unique to Marketo and doesn't have anything to do with general HTML. Therefore, when viewing the code outside of Marketo, some other color is going to render.

View solution in original post

Jim_Thao7 · ‎08-09-2017

I use Brackets quite frequently and have never had this issue. Are you talking about the live preview? The editor pop up color of the actual hex code? Are the colors wrong when viewing the page in other/multiple browsers? Not quite sure I'm envisioning your issue correctly.

Danielle_Wong · ‎08-10-2017

Thanks Jim.

Yes, in live preview within Brackets, the background colors are showing up distorted (almost inverted, but not sure). And when I paste the code in browser-based editors like HTMLiveCode - Browser-based editor for HTML/CSS/JS prototyping , it also happens.

but after looking further into it, the color attributes are being defined in head tag, and not within the html. For example, to style a cell for a button, the html is:

And then the corresponding style is found just under the <head> tag:

Not sure why this template was designed this way, but Marketo is able to read the code correctly and show the colors as expected, while all other editors do not.

Jim_Thao7 · ‎08-10-2017

I see. This is probably because the ${Section3BtnBGColor} references are unique to Marketo and doesn't have anything to do with general HTML. Therefore, when viewing the code outside of Marketo, some other color is going to render.

Danielle_Wong · ‎08-10-2017

Thanks again Jim. That makes sense. I didn't know the reference was Marketo-specific. I will have to figure out the best way to use code that has these references in Brackets.