Universal Language Support only by JSON

[alijacob]

I am using with Wordpress to highlight code syntax, and which does amazing.

What I am looking for: JSON to insert the list of keywords(which React manages) inside <script></script> as Javascript object. So, that I do not require to Download Prism for multiple Languages.

Downloading Prism for multiple languages makes script unnecessarily heavy. And downloading and isnerting for multiple languages individually makes everything havoc.

Instead I am looking for, a way to insert the JSON as Keywords and Prism Manages highlights.

In my wordpress theme file, I will add one Prism js file, I do not require any seperate Prism-JS files to insert. And it manages for all the languages, by looking for the Keywords in JSON data.

I am new to JavaScript and PrismJS, so - anyone understands this, and can help me, please guide.

Comment: If you do not understand.

[RunDevelopment]

I'm sorry but I do not understand. Here is what I understood:

• You use Prism on your website.
• You don't want a large Prism bundle from our download page.
• You have some JSON data. (I don't know what the data is. I only know that it is in JSON format.)

Is this about automatically loading languages? Does the Autoloader plugin do what you need? (Autoloader usage is described here.)

[alijacob]

Well - I only have one prismJS included with my (Wordpress or any CMS main Javascript File).

What the problem is: I am adding PHP code, and in another Post, or the same post CPP code, not two languages, multiple languages

I do not want to download seperate - Prism files.

I want to insert just JSON or Javascript Object, which will have have mention of the language and keywords.

These days, Wordpress has powerful editor - called Gutenberg, which uses Block system. So, block will be designed by me.

But, I want to just mention the language in code-block(gutenberg block), it will add the keywords as JSON in the Code block.

I do not require to download multiple files, nor a single heavy file for all languages definitions

[alijacob]

Simple words: I want to add Single Prism js for all the languages - But I do not want heavy file, rather I want to insert the language-name, and the keywords during -

Wordpress, gutenberg edit, Gutenberg block. As Json

[RunDevelopment]

Sounds like Autoloader is what you want. With Autoloader you only need to include 3 Prism files: Prism, Autoloader, and a CSS theme. Autoloader will automatically download missing languages. You don't even have to tell it which languages are missing/necessary. It does everything automatically.

This describes how to use Autoloader with a CDN (recommended).

---

But I still don't understand what you mean by "keywords"?

[alijacob]

https://snipboard.io/wuPFvd.jpg is it possible to insert these - as json, explicitly for different languages

[RunDevelopment]

What do you mean by "insert these"? Do you want to add new keywords to JavaScript? (If yes, why?)

[alijacob]

In my theme file(wordpress theme) - I want light prism js file.

So, when adding code-block(gutenberg block), I want to insert just JSON, so that - my Script-file(wordpress-js file) is as small as possible

[alijacob]

No, new keywords. But keywords inserted from the JSON, to keep the Prism js main(wordpress theme-js) file as small as possible.

I do not need to add another prism-js for another language, all controlled during writing post, just through Gutenberg - add the json, and prism will highlight, from the json definition.

[RunDevelopment]

So, when adding code-block(gutenberg block), I want to insert just JSON

What are the contents of that JSON? JSON is just a data format.

[alijacob]

Contents of JSON -

1. If the code added is 'CPP' - JSON will contain CPP - Keywords
2. If code added is php - it will contain PHP keywords
3. if code is SQL - it will contain - SQL keywords

It will default style for everything, and highlight the (Programming Language)keywords. I want to keep everything minimal, just highlight the keywords(programming-language), and default everything

[RunDevelopment]

That's not a good idea. Highlighting a programming language is no trivial task.

Let's take PHP as an example: Keywords are only a small portion of what Prism's PHP language does. Some of what Prism does is to enable very granular highlighting (the opposite of what you want) but most of it is necessary to get correct highlighting. E.g. strings and comments may contain text that looks like a keyword. PHP code may also be embedded into an HTML document, so Prism supports that as well.

Changing Prism's regexes is possible but I would not recommend it here.

In your case, I'd recommend keeping it simple. Prism languages are not that big. With Autoloader, languages are lazy-loaded, so you don't have to worry about them slowing down your site. To get the minimalistic look, change your CSS theme. That should give you a minimalistic look with good performance.

[alijacob]

I want - just the keywords highlighted - nothing more, And above is what is wanted, no extra style required.

Do you have full understanding of Prism-JS, maybe you do not want to help me?

And you ware saying this is not possible.

For "Coy" (with line numbers, normalize white-space, "Keyword-highlighting" enabled - I want - for individual Programming language, if keyword is present - then put the JSON(for 34 lines snippet, there would be max 13 keywords), put them in JSON and the Language.

And highlight ....

Nothing extraordinary is wanted. And you're saying this is not possible.

You do not understand the use case - we have a big blog, high number of pages, and maintaning individual language is havoc. What is Problem here??

If during creating post, in Custom Gutenberg block, we just select the Programming language as Drop-Down and if CPP is selected, it will insert the CPP keywords only present in the blog.

I will not insert the CPP keywords - the react will find for the keywords, and insert this as particular JSON, and maybe, some changes to the Prism-js script as well.

This is what wanted, because that will make everything simple and straight, I just highlight apply on the keywords and show which language this is - -

Nothing more is wanted

Understand the use case

[mAAdhaTTah]

Nothing extraordinary is wanted. And you're saying this is not possible.

Yes, this is not possible by default. If you want the user to only download the languages used on the page, use the Autoloader. If you only want to highlight keywords, you need to copy Prism and strip down the languages to only highlight those keywords. We do not have a "only ship keywords" mode for Prism.

Do you have full understanding of Prism-JS, maybe you do not want to help me? ... You do not understand the use case - we have a big blog, high number of pages, and maintaning individual language is havoc. What is Problem here??

This tone is incredibly disrespectful for an open-source project run by volunteers. It does not appear Prism satisfies your use case. You can use the tools we've provided to get as close to what you want as you can, or you can fork the project and modify it so it works for your use case.

[alijacob]

Yes, I am looking for any guide - to modify Prism for my Use case, can anyone give some little - guide, to change this to minimal and keyword only mode. I do not want to disrespect the developers - cause for my site, I am also building Sidebar and Interactive "Multi-level Dropdown" and Javascript is kind of Tricky of a new user like me. So, I was looking for official guide, if any so that I do not require to make another Highlighter.

From the comments, I can determine that - "Prismjs is expandable but not accomodative for specific use cases". And there is little guide on "PrismJS core", so I can not understand what is the part to change to make Prism according to my use.

[RunDevelopment]

I am also building Sidebar and Interactive "Multi-level Dropdown" and Javascript is kind of Tricky of a new user like me.

We cannot help you with the Gutenberg/WordPress/PHP stuff. Prism is a JavaScript syntax highlighter and nothing more.

I am looking for any guide [...] to modify Prism [...] to change this to minimal and keyword only mode.

As @mAAdhaTTah said:

If you only want to highlight keywords, you need to copy Prism and strip down the languages to only highlight those keywords. We do not have a "only ship keywords" mode for Prism.

However, if your goal is to get a minimal design, you could just change your chosen Prism CSS theme. By removing the styles for everything but keywords, you get a minimal design.

Example:

the part to change to make Prism according to my use.

That's the problem. If your goal is to ship only keywords to your users, then there is no one part you would have to change. You would have to change all of Prism >200 languages.