PrismJS / prism

Lightweight, robust, elegant syntax highlighting.
https://prismjs.com
MIT License
12.28k stars 1.3k forks source link

bug(plugin): command-line data-filter-out not working #1706

Closed muuvmuuv closed 5 years ago

muuvmuuv commented 5 years ago

I'm trying to get this to work:

<pre class="command-line language-bash" data-filter-output="(out)" data-user="user" data-host="remotehost">
  <code>
  pwd
  (out)/usr/home/user/bin
  ls -la
  (out)total 2
  (out)drwxr-xr-x   2 user  group     11 Jan 10 16:48 .
  (out)drwxr--r-x  45 user  group     92 Feb 14 11:10 ..
  (out)-rwxr-xr-x   1 user  group    444 Aug 25  2013 backup
  (out)-rwxr-xr-x   1 user  group    642 Jan 17 14:42 deploy
  </code>
</pre>

I'm loading the core and plugins like this:

import 'prismjs/prism.js';
import 'prismjs/plugins/unescaped-markup/prism-unescaped-markup.min.js';
import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace.min.js';
import 'prismjs/plugins/autolinker/prism-autolinker.min.js';
import 'prismjs/plugins/command-line/prism-command-line.min.js'; // BUG: output not rendered correctly
import 'prismjs/plugins/line-numbers/prism-line-numbers.min.js';

and prism is rendering it to this:

bildschirmfoto 2019-01-14 um 10 56 42 bildschirmfoto 2019-01-14 um 10 56 16

I have tried disabling all plugins but still not the result I expected.

RunDevelopment commented 5 years ago

The leading spaces are the problem (I think). Because of them, you don't have any lines with the prefix (out) but a few with the prefix [ ][ ](out) ([ ] for one space).

Also, please don't indent your code. For pre elements, every (leading) space counts. They will not be removed as in other tags.

muuvmuuv commented 5 years ago

Hey @RunDevelopment, I have tried this with no success:

            <tr>
              <td>
                <pre class="command-line language-bash" data-filter-output="(out)" data-user="user" data-host="remotehost">
<code>
pwd
(out)/usr/home/user/bin
ls -la
(out)total 2
(out)drwxr-xr-x   2 user  group     11 Jan 10 16:48 .
(out)drwxr--r-x  45 user  group     92 Feb 14 11:10 ..
(out)-rwxr-xr-x   1 user  group    444 Aug 25  2013 backup
(out)-rwxr-xr-x   1 user  group    642 Jan 17 14:42 deploy
</code>
                </pre>
              </td>
              <td>

renders to:

<code class=" language-bash"><span class="command-line-prompt"><span data-user="user" data-host="remotehost"></span><span data-user="user" data-host="remotehost"></span><span></span><span data-user="user" data-host="remotehost"></span><span></span><span></span><span></span><span></span><span></span><span data-user="user" data-host="remotehost"></span></span>
pwd

ls -la

</code>

I have also tried to just activate the core and command-line again.

muuvmuuv commented 5 years ago

I have created a fiddle: https://jsfiddle.net/muuvmuuv/tckqsa1j/

muuvmuuv commented 5 years ago

I have found the issue, I had not imported the required languages... 😆 sorry, so obvious

RunDevelopment commented 5 years ago

It should work even without the grammar being imported, so I still think that this needs fixing.

The first version of my fix can be found here. I will make a PR for this.