Authress-Engineering / openapi-explorer

OpenAPI Web component to generate a UI from the spec.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

No code highlighting with PHP language in code samples

addshore opened this issue · comments

Example defined as:

        - lang: php
          label: PHP + cURL
          source: |
            $curl = curl_init();

            curl_setopt_array($curl, [
              CURLOPT_URL => "https://api.foo.com/api/users/login",
              CURLOPT_RETURNTRANSFER => true,
              CURLOPT_ENCODING => "",
              CURLOPT_MAXREDIRS => 10,
              CURLOPT_TIMEOUT => 30,
              CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
              CURLOPT_CUSTOMREQUEST => "POST",
              CURLOPT_POSTFIELDS => "{\"username\": \"user@example.com\",\"password\": \"abc123...\"}",
              CURLOPT_HTTPHEADER => [ "Content-Type: application/json" ],
            ]);

            $response = curl_exec($curl);
            $err = curl_error($curl);

            curl_close($curl);

            if ($err) {
              echo "cURL Error #:" . $err;
            } else {
              echo $response;
            }

I tried PHP and php

Resulting render is as follows

image

As JavaScript has styling in the code block, I would expect other languages to also work?
I could be calling the language the wrong thing?
It could be only a subset of languages work?
Either way I suspect this is a bug, or a documentation change to make things clearer

Historically the php rendering has been broken in Prisma which is the library we are using (and really the only library). We can try turning it back on and seeing what will happen. Feel free to test out that change in a PR, if it works it works and we can merge it in.

Indeed

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'tokenizePlaceholders')

Call Stack
eval
node_modules/prismjs/components/prism-php.js (339:0)
Object.run
node_modules/prismjs/prism.js (762:0)
Object.highlight
node_modules/prismjs/prism.js (671:0)
SyntaxHighlighter.renderHighlight
node_modules/openapi-explorer/dist/es/components/syntax-highlighter.js (102:50)
SyntaxHighlighter.render
node_modules/openapi-explorer/dist/es/components/syntax-highlighter.js (82:0)
SyntaxHighlighter.update
node_modules/lit-element/development/lit-element.js (115:0)
SyntaxHighlighter.performUpdate
node_modules/@lit/reactive-element/development/reactive-element.js (816:0)
SyntaxHighlighter.scheduleUpdate
node_modules/@lit/reactive-element/development/reactive-element.js (751:0)
SyntaxHighlighter.__enqueueUpdate
node_modules/@lit/reactive-element/development/reactive-element.js (724:0)

Seems to be related to PrismJS/prism#1400

But simply adding import 'prismjs/components/prism-markup-templating.js'; doesn't make it work

I think the right approach now would be https://github.com/mAAdhaTTah/babel-plugin-prismjs as this project uses babel

(Not going to spend any more time looking at this today)

The real solution is in: PrismJS/prism#1400

And for prosparity, babel is only used for vanilla JS so this would not work everywhere, we needed a real solution.