drewdan's avatar
Level 15

Spatie Laravel Markdown not working locally

Hey Folks,

I was wondering if anyone had any experience with the Laravel markdown package? I have installed it, and also installed the NPM package for shiki, and if I push this up to a server on Laravel Forge, the parsing seems to work correctly. However, in my local development environment it just does not parse at all. I get:

<div>
	<h2 id="foo">Foo</h2>
$foo = 'bar';

<h1 id="good-to-know">Good to know</h1>

</div>

Whereas on the forge server I get:

<div><h2 id="foo">Foo</h2>
<pre class="shiki" style="background-color: #ffffff"><code><span class="line"><span style="color: #24292F">$foo </span><span style="color: #CF222E">=</span><span style="color: #24292F"> </span><span style="color: #0A3069">'bar'</span><span style="color: #24292F">;</span></span>
<span class="line"></span></code></pre>
<h1 id="good-to-know">Good to know</h1>
</div>

Has anyone any idea what might cause the different behaviour between environments. It is probably worth noting I had to upgrade to PHP 8 to use this package, and I did this locally as well as provisioning a new server running 8.1. My theory is that it is a missing dependency, but I just don't know why.

Any tips or help would be greatly appreciated!

Andrew

0 likes
22 replies
Sinnbeck's avatar

Can you show the MD content and the code for converting it?

What is your local php environment? Docker?

drewdan's avatar
Level 15

@Sinnbeck Sure thing, so the Markdown is just in the blade file as per the instructions in the spatie markdown docs:

https://spatie.be/docs/laravel-markdown/v1/introduction

<x-app-layout>
	<div class="grid grid-rows-1 pt-10 justify-items-center font-sans px-5 pb-10 bg-gray-50">
		<div class="font-extrabold text-6xl max-w-2xl mt-5 text-blue-900 text-center">Documentation</div>
	</div>
	<div class="pt-10 pb-20 px-5 md:px-20 bg-gray-200">
		<x-markdown>
## Foo

``php
$foo = 'bar';
``

# Good to know

		</x-markdown>
	</div>

</x-app-layout>

I am using a Windows 10 Machine using WSL2, the site it hosted in the WSL2 instance, running PHP8, with a MySQL8 DB, Apache and Redis.

The big difference I guess between the forge server and my environment is that the forge server runs nginx.

Edit: have removed some backticks in the x-markdown comment so it does not mess up the posting here.

Andrew

Sinnbeck's avatar

@drewdan Try seeing if you can run shiki at all then

Here is the source. Copy it in to a controller, and try calling it to see if it throws an error.

protected function callShiki(...$arguments): string
    {
        $command = [
            (new ExecutableFinder())->find('node', 'node', [
                '/usr/local/bin',
                '/opt/homebrew/bin',
            ]),
            'shiki.js',
            json_encode(array_values($arguments)),
        ];

        $process = new Process(
            command: $command,
            cwd: realpath(__DIR__ . '/../bin'),
            timeout: null,
        );

        $process->run();

        if (! $process->isSuccessful()) {
            throw new ProcessFailedException($process);
        }

        return $process->getOutput();
    }
drewdan's avatar
Level 15

@Sinnbeck it does indeed throw and error, the error is:

Symfony\Component\Process\Exception\RuntimeException
The provided cwd "" does not exist. 

Not sure what a cwd is though!

Sinnbeck's avatar

@drewdan Ah it seems to be relative to the vendor dir. (cwd is current work dir)

Try just calling it directly instead

$highlighted = \Spatie\ShikiPhp\Shiki::highlight(
    code: '<?php echo "Hello World"; ?>',
    language: 'php',
    theme: 'github-light',
);
drewdan's avatar
Level 15

@Sinnbeck Think we are getting somewhere, this also fails, but with a more meaningful error:

The command "'node' 'shiki.js' '["<?php echo \"Hello World\"; ?>","php","github-light",{"highlightLines":[],"addLines":[],"deleteLines":[],"focusLines":[]}]'" failed. Exit Code: 127(Command not found) Working directory: /var/www/sentinel.local/public_html/vendor/spatie/shiki-php/bin Output: ================ Error Output: ================ sh: 1: exec: node: not found
Sinnbeck's avatar

@drewdan Yeah thats progress. Sounds like you dont have node installed in the WSL2 instance

drewdan's avatar
Level 15

@Sinnbeck Could this be to do with it not being available in the .bashrc of the www-user? As in my WSL2 console, if I type in "node" - the node console loads up as expected.

Sinnbeck's avatar
Sinnbeck
Best Answer
Level 102

@drewdan It might be. Sadly I dont have a windows pc to test with. You can try running just this bit, to see if find anything. My guess is no

$path = (new ExecutableFinder())->find('node', 'node', [
                '/usr/local/bin',
                '/opt/homebrew/bin',
            ]);
drewdan's avatar
Level 15

@Sinnbeck thank you! Your direction was perfect. I use NVM locally, which means the node location is different to that of a standard machine.

'/home/drewdan/.nvm/versions/node/v17.3.1/bin',

This is where my node actually is, which is why it did not work.

This is a personal/side project, but it's a project for me to learn and try new things. So I dived into TailwindCSS after being scared of it and hiding behind bootstrap, and I am also using Livewire too. I did see Torchlight, and considered it, but figured trying this would be a better learning experience, and it was, I learnt NVM has a different location for node!

Thank you again for your help!

myurtsev's avatar

Hi @drewdan , Did you find a solution for this? I have the same problem but reversed. It's working locally but not on production.

drewdan's avatar
Level 15

@myurtsev The package is looking for your node executable in /usr/local/bin and /opt/homebrew/bin - if its not there, it won't work. I added the following as a PR to the docs recently, though they have not been published yet:

Using Node Version Manager

Under the hood, this package runs a node command to render the markdown. If you use NVM during development, then the package will be unlikely to find your version of node as it looks for the node executable in /usr/local/bin and /opt/homebrew/bin - if this is the case, then you should create a symlink between the node distributable in your NVM folder, to that of the usr/local/bin. Such a command might look like this:

sudo ln -s /home/some-user/.nvm/versions/node/v17.3.1/bin/node /usr/local/bin/node

Creating this symlink will allow the package to find your NPM executable. Please note, if you change your NPM version you will have to update your symlinks accordingly.

I would recommend if your node is installed somewhere else, creating a symlink so it can be found by the package

1 like
yoman's avatar

anyone found a solution for this problem on production?

drewdan's avatar
Level 15

@yoman you need to make sure you have installed node, and it is this directory /usr/local/bin as this is where the script will look to run it, and if it is there, you need to make sure the user which runs the script has permissions to run it.

yoman's avatar

@drewdan HI thanks for the reply. I've run which node this is the output

/usr/bin/node

then run this

sudo ln -s /usr/bin/node /usr/local/bin/node

ls- l

lrwxrwxrwx 1 root root      13 Jun  4 21:42 node -> /usr/bin/node

but nothing happen. not really sure what to do next.

I tried this 2 tests on production

First for location

    protected function callShiki()
    {
        $path = (new ExecutableFinder())->find('node', 'node', [
            '/usr/local/bin',
            '/opt/homebrew/bin',
        ]);

        dd($path);
    }

with output "/usr/local/bin/node"

Second for highlight

   public function testshiki() {
        $highlighted = \Spatie\ShikiPhp\Shiki::highlight(
            code: '<?php echo "Hello World"; ?>',
            language: 'php',
            theme: 'github-light',
        );
    
        echo $highlighted;
    }

it output with higlighed code

t9dev's avatar

@yoman , how did you clear the cache? Do you still remember?

yagogak's avatar

I you had the idea to remove to /public/build from gitignore, and you have this problem on production ( forge ) you have to run npm install on the server ( a better add it to the deployement script )

ksergio's avatar

@yoman Thank you very much. Solved for me.

In my .env I had this; CACHE_STORE=database

Went to my database and found in the table 'cache' a value with the markdown. Just deleted it and worked!

Please or to participate in this conversation.