kueblc / ldt Goto Github PK
View Code? Open in Web Editor NEWLightweight in browser syntax highlighting
Home Page: https://kueblc.github.io/LDT/
Lightweight in browser syntax highlighting
Home Page: https://kueblc.github.io/LDT/
On the left is LDT's source, on the right a demo that highlights what's been added.
Please note that this is whipped out of an old project of mine where I tweaked LDT quite a bit. I've however imported the latest version of TextareaDecorator()
which is where the meat of the patch lies (There's also some CSS, some of which may not be necessary).
If you'd like to publish the package to npm, I've added you to npm.com/ldt as an owner, please feel free to publish any version.
I know it's not one of the officially supported browsers, but I tried it in iOS (UIWebView). There is a shadow of the text. It looks like maybe the underlying textarea is being render in light gray and is slightly offset a couple pixels. Also it is murderously slow, even for a small bit of text. On the plus side, it reacts to touch events properly (no 300ms delay, drag selection ok, etc.). These are issues that make other similar solutions like codeMirror unusable on iOS.
I use a modified version of LDT in one of my personal projects. I changed it so that it allows line wraping, and also refactored some of it to follow the standard convention of storing methods in a prototype.
If I repackage my changes to make them optional, would you be interested in pulling from me?
Is there any way to remove horizontal scrollbar for it without losing correct rendering?
Say I want to make a parser for a markdown file but it's able to contain tags/annotations like @foo(bar)
. I want to color the contents of bar
but only if there's a @foo
before it - so I tried something like this:
var parser = new Parser({
whitespace: /\s+/,
tagKey: /@\w+/,
tagValue: /(?<=@\w+)\([^\)]+\)/,
other: /\S/
});
But this did not work. When I read the api for a parser, I realized that it's probably first breaking them into separate tokens and then applying the regexes to recognize the type of each token.
Is there a way to achieve what I want or does the api not support this? Maybe you could have support for parsers that can do both .tokenize()
and .identify()
in one go which would allow this?
In Internet Explorer 8, the tab character has a non-standard width of 6.5 in the input layer, and a width of 1 in the output layer, causing misalignment.
As indicated in the title, I am trying to create a Parser ruleset to highlight Markdown.
So far, I can perfectly match the inline stuff for bold and italic text as well as other stuff. However, I am unable to match headers, lists and proper code fences.
It would be nice if you could help me out there! This is my Parser so far:
var rules = {
list: /[-\*]\s[^\n\r]*\n?/,
header: /#\s[^\n\r]*\n?/,
"bold fix": /[\*\_]{2}[^\_\*\r\n]*[\*\_]{2}?/,
"italic fix": /[\_\*][^\_\*\r\n]*[\_\*]?/,
strike: /-[^-]*-?/,
code: /```[\r\n].*[\r\n]```/,
quote: />[^\r\n]*\n?/,
mention: /@[^@\r\n]([a-z0-9\-\._]*)?/,
url: require("url-regex")(), // Dink! :)
ip: require("ip-regex")(),
email: require("email-regex")(),
hashtag: /(#[a-z0-9][a-z0-9\-_]*)/,
whitespace: /\s+/,
other: /\S+/
};
Kind regards, Ingwie.
For now style of textarea is unable to be changed, because it will cause bad .ldt label
offsets.
I think, it’d be nice for LDT to try to clone generic textarea’s padding
, border
and other vital styles, in order to behave less rigidly.
The project URL is https://kueblc.github.io/LDT/, not .com
Very nice and brilliant project. We want to have it for our language Arendelle and for Arendelle we have a library that generates span based HTML for highlighting on the web pages.
marker.js project we have has this function markerHighlight
that takes string Arendelle and generates HTML for highlighting and we want to replace it with your backend for the highlighting.
The question is which parts of the code much be changed for proper implementation of this idea?
I would like to be able to react on the entering of special characters. For instance, when the user types in {
, I would like to automatically add a closing }
.
Previously I had tried using LDT in tandem with BehaveJS...but that did not go well, because Behave.JS "ate" the backspace key; which would prevent api.update()
to be called.
@kueblc this thing kicks some serious booty.
I'm using LDT to syntax-highlight TailwindCSS classes in an HTML editing layer for a WordPress page-building tool.
Lightweight syntax highlighting opens up so many doors if you offer textareas as 'faux code editors' to help less experienced designers know 'what's safe to edit,' etc.
Great work. Happy to use this and very much on board with supporting it, if it's still being worked on.
Dave Bloom
In Opera 11.61, the input layer is too large causing the vertical scrollbar to always be visible
The overlay does not display blank lines
In IE 9, delete and backspace do not update the HTML overlay
The page linked is: https://kueblc.github.com/LDT/. But it gives 404 - There isn't a GitHub Pages site here.
Github Pages isn't listed as an active environment in the lower left, so maybe it got disabled via settings?
Or maybe it's just not working because there isn't an index.html
in root?
https://spdx.github.io/spdx-spec/v2.3/SPDX-license-expressions/
based on this reference for license expressions, your current text suggests that to use this both GPL and MIT must be followed though i suspect you meant that the code is licensed with either of them?
Monospace is nice for coding, but for my usage of LDT, I want to use a pretty text. So I'd like to use something like Arial or Verdana instead of a monospace font, simply because monospace does not look all too nice.
But using any other font than a monospaced one will cause the letters to be shifted. The letters in the textarea have a wider spacing than in the pre
.
Why is that?
Adding
if (input.charAt(input.length - 1) === '\n') input += "\n"
at the start of color()
and
.ldt pre:empty::after {
display:block;
content: " "
}
in the CSS file lets one set the rows to the exact number of lines at the end of update()
.
This results in a better behavior IMO (no container overflow).
Live example with a "gutter" plugin adapted to the new number of rows.
Edit: :empty
is IE9+. I don't know how important IE7 compat is to you and the LDT user base at this point... I'd expect it to be low... I can send a PR if you're interested.
In Firefox 3.6 and IE8 on Windows, non-regular font styles may overflow causing misalignment. This can be avoided for single line tokens by setting display to inline-block and decreasing the bottom margin, (ex, margin-bottom: -1px;).
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.