getting php to render properly in html

[MrMerkin]

First off, awesome tool! 👍 Setup was easy and it runs flawlessly in MAMP as well.

I'm using code blocks with pure php, and php mixed with html. The php works perfectly after a few tweaks to the CSS. I'm also using Rainbow.linenumbers.js from Blender, so not sure if that's causing any issue. It just appears to be wrapping things in table tags.

When doing html with php inside of it I'm not sure how to color things like parens, curly braces, brackets, and semicolons, because the php tag isn't inside of it's own span. Therefor all that stuff is colored the same as the php tags which looks funky.

I tried using php as the data-language instead of html, but then I can't target the html tag to give it its own color as the < > are given the classes of "keyword operator" with the tag's name floating loose in the parent span. This obviously conflicts with the php "keyword" and "operator" classes, so I can't do it that way.

This first image shows how things render with php as the data-language (awesome):

This one shows what happens with html as the data-language with php in it (not so awesome):

As you can see the ( ) of the function and the ; are orange because they're in the primary span for php with the "source php embed" classes.

Is there any way to get around this? I have no knowledge of javascript or how to add new rules for the highlighting or I'd just edit the rainbow-custom.min.js that I generated from your website. ;)

thanks, and hope you can help with this. It's the only snag I've run into so far.

[MrMerkin]

By the way, I saw in the docs about doing this, but any way I tried to add it as an extend to the rainbow.js file (or even my php footer) didn't work.

advice welcome.

thanks

[ccampbell]

Thanks for the report! I will take a look in a little bit. I have a rainbow playground page I have been working on, but it doesn't exist anywhere on the internet at this moment, but should be easy enough to test.

As for extending it should be something like:

<script src="rainbow.min.js"></script>
<script>
    Rainbow.extend('php', [
        {
            'matches': {
                1: 'support.function'
            },
            'pattern': /\b(apc_(store|fetch|add|inc))(?=\()/g
        }
    ]);
</script>

I think that should work, but I haven't tested it. You may have to explicitly pass in 'php' as the third argument to the extend call, but that seems a bit strange

[MrMerkin]

I'll give it a shot. Thanks for the fast reply.

By the way, I'm an artist, so if you do decide to put the playground live at some point, let me know and maybe I can pimp the pixels a bit for ya ;)

[MrMerkin]

No luck with your code, man. I tried adding the php stuff to your code also, but I'm most likely doing it totally wrong. I have no idea what the syntax or patterns are supposed to be. It might as well be written in Swahili. -_-

Also, I just noticed your code is extending php. Shouldn't this be extending html?

This is what I saw in the docs that didn't work for me:

<script>
    Rainbow.extend('html', [
        {
            name: 'source.php.embedded',
            matches: {
                2: {
                    language: 'php'
                }
            },
            pattern: /&lt;\?(php)?([\s\S]*?)(\?&gt;)/gm
        }
    ]);
</script>

[ccampbell]

HTML actually already has a native rule for including PHP inside of it:

rainbow/src/language/html.js

Lines 7 to 15 in 3374f13

	{
	name: 'source.php.embedded',
	matches: {
	2: {
	language: 'php'
	}
	},
	pattern: /<\?=?(?!xml)(php)?([\s\S]*?)(\?>)/gm
	},

So you shouldn't have to do that. That was just an example in the docs to explain how you could insert a language inside of another language.

The example I sent in this ticket was how to actually extend the rules for an existing language. I am not sure this bug is something that can be fixed by changing the language rules.

[MrMerkin]

Ok.

So this is a bug then? ...that the opening and closing inside of html are not being wrapped in their own spans? That's all that's needed for this to work.

If so, then I'll just keep my eyes peeled for a bug fix, and I'll try to manually add my own spans for now as a hack.

thanks

[ccampbell]

Hmm so this is actually working correctly for me. I wonder if it is related to the linenumbers plugin. If I include these languages:

<script src="/src/language/generic.js"></script>
<script src="/src/language/html.js"></script>
<script src="/src/language/php.js"></script>

Then use your sample markup and highlight it the resulting code is:

<code><span class="support tag">&lt;</span><span class="support tag-name">article</span></span><span class="support tag close">&gt;</span><span class="source php embedded">&lt;?php <span class="function call">somefunction</span>() ?&gt;</span><span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">article</span></span><span class="support tag close">&gt;</span></code>

That looks correct to me

Do you have a sample page or jsfiddle where you can show me it not working?

[MrMerkin]

I generated the js file from your website (https://craig.is/making/rainbows) , where I chose javascript, html, css, and php from that list that expands. Maybe the way it's generating the js file it's messing up something? I only got 1 file that was minified when I downloaded it this way.

[ccampbell]

Let me try using the minified file with those language one off and see what happens…

[MrMerkin]

sounds good.

I only have it on a local install right now, but if it's not happening to you with the minified version then I'll upload it to my server.

[ccampbell]

Here is a jsfiddle of it working:

https://jsfiddle.net/cdh0wjwy/1/

Hopefully that helps

[MrMerkin]

yeah, same as I get, no spans around the php tags.

[MrMerkin]

Sorry man, maybe I need to clarify, I'm trying to get something like this:

<span><span class="php-tag-class">&lt;?php</span> <span class="function">myfunction</span>(); <span class="php-tag-class">?&gt;</span></span>

see how the opening and closing php tags are wrapped in spans so they can be colored, and the ( ) and ; are just floating loose in the parent span

[ccampbell]

Ahhh I see what you mean. So basically the highlighting of the php tags themselves is inconsistent when using html vs. php as the language. The (); is correct to be floating loose and not highlighted though.

So the other difference is that when it is embedded in html the entire php block is wrapped in a <span class="source php embedded"></span>.

I am working on a fix right now for the open and closing php tags, but I hope that is what you want

[ccampbell]

So when it is done it will be what you want except the first span will have source-php-embedded class on it:

<span class="source php embedded"><span class="php-tag-class">&lt;?php</span> <span class="function">myfunction</span>(); <span class="php-tag-class">?&gt;</span></span>

[MrMerkin]

Yeah man! Now we're on the same page.

Yes, when embedded in HTML it is wrapped in that source php embed, but the php tags themselves are floating along with the rest. As you said, the other stuff being loose is fine, because all that stuff you'd want to be the same color. :)

The rest of the way you have it formatted has been working just fine here, though I haven't tried any complex php inside of html tags. If I see anything else I'll let you know.

And thanks so much for working this out and for the fast responses. Really appreciate it. 👍

[ccampbell]

No problem. I will let you know when the fix is live

[ccampbell]

Okay if you download a new package from http://rainbowco.de then it should have the fix. I also updated the jsfiddle: https://jsfiddle.net/cdh0wjwy/2/

[MrMerkin]

cool.

hmmm. I'm not seeing it working here in the fiddle...

Is that the right link?

[MrMerkin]

ah nevermind. I'm blind (long day)...

[ccampbell]

Yes it is. You can inspect:

[MrMerkin]

yeah, I saw. I forgot you didn't add any css.

I grabbed the file from your site but I'm not seeing the tags here in my local install. Maybe the page is cached or something. I have caching turned off here. I'll see if I missed something and flush everything, restart and reboot MAMP and see how it goes.

Much thanks again

[MrMerkin]

Awesome man. Now it's working. Rock on!

Thanks so much. If you ever need some help with graphics, just holler!