Hi there,

I am building a template editor for myself using Prism live, So far i loved how it works. So my idea was i would paste some html code on the textarea, when i press a button i am getting the textarea.value and modifying it then resetting the textarea.value, But highlighting seems not working.

Is there any way to do this? Or is there any way to re-initialize the prism live?

Thanks in advance!

Even on your own page.
the --height style isn't keeping the height the same.

https://live.prismjs.com/

There shall be better handling of typing coding with brackets.

For example, function(msg){ console.log(msg) }

Description:
There is auto closing bracket after typing function(

Expected Result:
No duplicated closing bracket when my typing is f u n c t i o n ( m s g )

Actual Result:
Cursor needs to be adjusted after the ) after typing f u n c t i o n ( m s g

Otherwise, typing f u n c t i o n ( m s g ) will become function(msg))

Usually in a code editor, if you hit backspace or delete an opening bracket, parenthesis, etc. just before a closing one, the closing one is deleted as well.

Eg, you type { this will produce:

{|}

(| represents the caret position)

Then at the same caret position you hit backspace, in a classic code editor this will remove both brackets. In Prism Live it just deletes the opening bracket.

Currently there is no license for the library.
I assume it was intended to be released under the MIT license, just like Prism?

Without a license, it is illegal for users to use in their products (unless they have explicit permission from the owner).

Many thanks for the PrismJS!

So far, I've used it to highlight the code snippets, and it works great!

Now, I would like to extend it and make highlighted code snippets editable (web-based code editor like Prism live).
On the Prism live site, I haven't found any example with the resizable editor (no scrollbars).

Adjusting CSS to make the editor resizable (mostly adding white-space: pre-wrap; and overflow: hidden), I've encountered the issue attached below. It seems that the solution with layered textarea and pre elements has some drawbacks (probably something with differently breaking text in textarea and highlighted content under pre element).

To get back to the problem 😄, is there any recommended way that Prism live plans to adopt to support resizable code editors in browsers?

TIA

In the base prism, the languages are already included. (prism-css, prism-javascript, prism-markup)
The syntax are displayed correctly.

Even the following three .js files are not loaded, every things work fine.
So what are the purposes of prism-live-xxx.js??

prism-live-css.js
prism-live-javascript.js
prism-live-markup.js

i use PrismJS / live for textarea. class="prism-live language-php line-numbers"

from js i insert in textarea new code. how restart or update highlight?

By default, spellcheck is enabled for textareas (tested on Chrome & Firefox).
As it is meant to show code, I believe it makes sense to disable it by default.

(Users can easily switch it off when using textarea, but when they use pre tags it is less convenient for them right now.)

Thanks for the great library @LeaVerou
Just curious, there is a host of plugins that require hover access to the code element that currently do not work. These include match-braces, autolink and previews.
Is there any plan to add support to them?

Hi, i found a bug in the demo for "specific max height" box, if we resize textarea control it overlap pre tag

I have found that simply adding the following will enable the toolbar plugin for Prism.js to work with Prism-Live.js:

/* Add support for prism toolbar. */

div.prism-live:hover .toolbar {
  opacity: 1;
}

div.prism-live .toolbar, 
.code-toolbar .toolbar /* Added because <pre> initiated variant has different structure than normal */
{
  z-index: 2;
}

I have added it as prism-live-toolbar.css to a branch on my own fork but is small so I am not sure if it justifies it being in its own file, unless it is better for people to be able to choose whether or not they want to include it into their own projects.

If you have time please let me know if this is acceptable for a merge request. Also should it be in a separate css file or in the main one?

Thanks for your time! #

If you put a variable in the JS editor window the browser console complains of "redeclaration of variable [X]"

Issue:

Appears to be caused by a misalignment of textarea and pre tag due to the margin added by line numbers.

Evidence:

Proof of misalignment:

Cursor displacement:

Live demo:

https://codepen.io/agentender/full/abNVxvV
Note, to reproduce the issue change the prism-live cdn link to target the master branch.

Go to the Prism Live web site, scroll down to the JS, and select something more than one line. For example, select setCaret() here

setCaret(pos) {
	this.selectionStart = this.selectionEnd = pos;
}

moveCaret(chars) {
	if (chars) {
		this.setCaret(this.selectionEnd + chars);
	}
}

(Not that this is where the problem may be; it's just what I happened to be staring at when I noticed this bug.)

Press Ctrl+/, and it comments out like it should:

/*setCaret(pos) {
	this.selectionStart = this.selectionEnd = pos;
}*/

moveCaret(chars) {
	if (chars) {
		this.setCaret(this.selectionEnd + chars);
	}
}

Notice the selection includes the /* */ markers. With those still selected press Ctrl+/ again and it just adds more comments (and creating a syntax error with the second end comment):

/*/*setCaret(pos) {
	this.selectionStart = this.selectionEnd = pos;
}*/*/

moveCaret(chars) {
	if (chars) {
		this.setCaret(this.selectionEnd + chars);
	}
}

It only un-comments if the /* */ are not selected. I change selection to this (| are the selection boundaries):

/*/*|setCaret(pos) {
	this.selectionStart = this.selectionEnd = pos;
}|*/*/

moveCaret(chars) {
	if (chars) {
		this.setCaret(this.selectionEnd + chars);
	}
}

Press Ctrl+/ and I get this:

/*se|tCaret(pos) {
	this.selectionStart = this.selectionEnd = pos;
}*/|

moveCaret(chars) {
	if (chars) {
		this.setCaret(this.selectionEnd + chars);
	}
}

Then without changing the selection hit Ctrl+/ again, and the selection range is messed up even more:

setC|aret(pos) {
	this.selectionStart = this.selectionEnd = pos;
}

m|oveCaret(chars) {
	if (chars) {
		this.setCaret(this.selectionEnd + chars);
	}
}

A couple of thoughts:

• There should be an option to turn off [tab] capture.
• There needs to be a keyboard only way of navigating away from the textarea to the next focusable.
  • Rather than change default browser behavior, [tab] should move to the next focusable and a special [tab]+[something] key combination should insert the tab space into the editor.

Hello and thanks for this prism-live library !

I'd like to try prism-live to write some long text like articles in markdown or things like that, and so I want long lines to wrap.

It's almost working with some little corrections.

Force wrapping lines in the wanted language (sorry for ugly css — it's an example) :

.language-xxx {
    white-space: pre-wrap !important;
}

But. textarea and pre don't have the same padding-right, so sometimes a word comes in next line in the colored text, and not in the textarea. In fact a padding-right with --scrollbar-width is applied on the pre and not on the textarea.

One possible correction is to use the same padding (almost for right) as the pre. Like (again ugly) :

.prism-live textarea.prism-live,
.prism-live pre.prism-live
{
    --scrollbar-width: 17px;
    padding: 1em !important;
    padding-bottom: var(--scrollbar-width) !important;
    padding-right: var(--scrollbar-width) !important;
}

This corrects the most common problems I've seen.
Although we need to use a coloration that don't change the size or weight of the font.

Cross-posting from rubin-dp0/Support#29

Steps to reproduce

In safari make sure you have atleast 2 windows open. Then go to https://live.prismjs.com/, and inside any demo text-editor, press "Cmd + `", backticks will be typed instead of switching windows.

The documents instruct to load desired languages:

<script src="prism-live.js?load=css,html,javascript"></script>

If you do this, vs just saying <script src="prism-live.js"></script>

It attempts to load bliss.shy.min.js, which is not included. So you have to go download that from blissfuljs

Then, bliss.shy.min.js tries to load the languages you want supported from the url params. So it looks for prism-live-css.js which is pdownloadable from the github repo, and then prism-live-html.js which does not exist.

Assuming it wants markup as the param? This does seem to be in the repo (prism-live-markup.js);

After i remove everything from the textbox and start typing again it becomes very weird as shown in the gif

Description
Wrong render of code when x-scroll is visible. Behavior present on https://live.prismjs.com/ using Firefox but is present on Chrome too with other code but less disturbing.

Screenshot

Hello, I am using prism live in a textarea and it works fine but when I try to add a code snippet using a button onclick function (document.getElementById("content").innerHTML += header;), the code is added but invisible until i press spacebar or another key, then it shows up nicely highlighted as expected. Is there a way to force it so it is highlighted right away?
It works when I just paste it with ctrl-v but not with button onclick.
thanks

I'm trying to find a good open source editor for graphql and stumble upon this here.
Now I was trying to get it working and my textarea and pre won't line up.

I include in the head:
prism-live.css
prism.css

bliss.shy.min.js

And after the textarea:
prism.js
prism-live.js

And the textarea has the classes:
prism-live match-braces rainbow-braces language-graphql

I have the following prism plugins installed:
match-braces and toolbar

Hello!

I was working on a Go playground + Prism app. In essence, I take the code from a prism-live textarea and send it to an API of https://play.golang.org/ to be processed, and I get this error:

./prog.go:8:1: invalid character U+200B in identifier
./prog.go:8:1: syntax error: non-declaration statement outside function body

The problem character is a Zero Width Space character (U+200B) that was added by prism-live.js at line 339, col 13. I don't know how frequently this could happen to others, but maybe it's best to keep a strict copy of the code in the text area.

Thanks for all your work!

I want to add the feature of source code highlighting dynamically. Thus, I was looking for information about how to instantiate the plugin by code.

I achieved this with something like:

let textareaControl = document.getElementById("inspector-textarea-control-0"); 
let prismEditor = new Prism.Live(textareaControl);

However, I need to specify the language I want to highlight and don't know the best way to do so. Maybe this could be added to the README, so that I (and others) know how to use it properly

Love the extension, it works so well.
How can I disable the automatic bracket/quote closing functionality?

When I type ( or ", I'd rather it didn't add ) or " after.

Can't seem to find where that code is.

Thanks for all your efforts.