Editable code areas powered by Prism.
WIP, use at your own risk and do not assume that the API will not change.
Prism Live: Lightweight, extensible editable code editors. A work in progress, try it out at your own risk (and report bugs!) :)
Home Page: https://live.prismjs.com
License: MIT License
Editable code areas powered by Prism.
WIP, use at your own risk and do not assume that the API will not change.
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.
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?
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?
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! #
Appears to be caused by a misalignment of textarea and pre tag due to the margin added by line numbers.
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:
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
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
);
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.