I was writing my own text editor in Electron using React and I tried to do some basic syntax highlighting. The user writes their code inside a textarea, but there is no way to insert markup inside a textarea so I can't color text that way.
I found this jquery plugin which adds a backdrop behind the textarea so we can put a background color in certain places however I wanted the text themselves to be colored (which can't be done as the textarea is in front of the backdrop).
Any ideas about how other IDEs like Visual Studio Code (also written in electron) pulled this off?
There are multiple approaches that can work here.
One way could be using a div with a contenteditable="true" attribute instead of a textarea. This way you can both write text inside the element and style its contents. Of course this creates its own issues that would have to be dealt with - when to parse the code, how to reposition the caret and more. Depending on the approach, MutationObserver could come in handy.
Another way would be to not use any built-in writing functionalities at all and implement your own. Listen to keyboard events and programatically insert characters. In that case you would also need to implement your own caret, selection etc., which is not easy.
VS Code is open source, so you can actually take a look under the hood and see how the editor is made. They use a completely bespoke editor called Monaco but its source code is in the VS Code repo. This file is a good start.
Related
newbie here. I want to code a website by myself with html, css and javascript. Is there any way I can use the outline of a text as a "barrier" and fill the inside of the letters with objects?
Objects like those on this website: https://www.fullbundle.com/
I want those objects to be interactive to the cursor, so they only become visible if you hover over the text. Like a rippling hover effect but with objects inside.
I already tried to find an answer by myself by inspecting similar websites but I couldn't find a solution
In the next step, I want to make a scrolling effect. When the filled text gets in touch with the top of my display it bursts and the objects inside are flying all over the place.
I know it's very much for a beginner but I am curious about how it's done.
I'm creating a webpage using markdown hosted by github.io. I really don't like the blue color of the hyperlink automatically generated by markdown and I'm wondering if it's possible to change it. More specifically, I'd like the text to stay black and the solid underline to become dashed underline. Here is a sample code:
Support static-based commenting via [Staticman](https://staticman.net/) for sites hosted with GitHub Pages. [#424](https://github.com/mmistakes/minimal-mistakes/issues/424)
I heard github markdown is different from traditional markdown, but I've seen people changed the link color and underline type with the same website template so I think it's still possible to change. Any suggestions?
Since GitHub uses its own styling after it processes your markdown file, any custom stylings will be overwritten. However, in a broader case, you can always use HTML elements in your markdown files. Take this example:
[normal link](https://www.google.com/)
custom link
The first one will appear as a normal blue link which will be underlined when you hover your mouse over it. The second one is a link that matches your requirements for black color and dotted underline.
I tested it on my local machine and it renders just fine in VSCode, but all styling is lost when I put it on GitHub.
Though, since you're going for a webpage, I really recommend going for HTML and CSS. They're really easy if you know MD and are much much more customizable.
Is there a method to extract the code's color scheme from paypal code expamples and place it in sublime text?
Here is a link: Paypal link
That page is made using Groc, that put comments next to code in a beautiful way. Groc seems to use two projects that I have used before: highlight.js and maybe pygments, to highlight the code, but they don't use any of the default stylesheets, I think they use their own stylesheet.
Inside the Groc project you can see this sass file which contains almost all the info you need (color for variables, strings, keywords, etc.) to manually add the values to a custom color scheme. In addition Groc style documentation shows other useful values of the Color Scheme such as the background. You can get other values inspecting DOM.
I think you would have to manually do it. You can use this Sublime Text Color Scheme Generator. In the Paypal window, you can use developer tools (Ctrl + Shift + C if you're using Chrome) and click on the words to see the exact color value, and then just use those in the color scheme generator.
EDIT: Please take a look at #sergioFC's answer, he gave an easier way of finding all the color values.
I'm trying to make the avalonedit right-to-left layout, so that supporting languages that are right-to-left (e.g. Arabic)
The code seems to be too large to be understood, I need at least to know where my changes would be? What are main modules of it, or some diagrams/docs clarifying each component (other than the 4 images provided with the source)
I need at least to know what are the basic components of an editor. Thank you for help
The TextView class is responsible for the actual text rendering. The layout within text lines is done using the WPF TextFormatter (see #region BuildVisualLine in TextView.cs).
AvalonEdit already supports bidirectional text within a left-to-right paragraph, so the editor should work if you can get WPF to create right-to-left paragraphs.
I think it might be sufficient to change the VisualLineTextParagraphProperties.FlowDirection property.
Ideally the text view would use the value of TextView.FlowDirection for this, but I've seen some weird effects when using TextView.FlowDirection (text being mirrored). Not sure what's up with that; I'm not familiar with the way WPF works in a right-to-left context (I guess there's some auto-mirroring feature?).
I have a requirement to use multiple font style in UITextView. Like Bold, Italic and Underline text in single Textview. Like:
One word is Bold second may be italic third Underline as per user selection.
I don't think this is allowed to do but still if any one have achieved and want to share. I need this all while enter text and same while displaying.
Thanks
You're right that the standard UITextView does not support rich editing. At the moment there are a few solutions to the problem.
The Omni Group has released their iOS and Mac frameworks under an open source license. These include a very powerful rich text editor (see: OUIEditorFrame.m). These are very powerful but also extremely complex. Their sample iPad app includes the rich text editor example. Further discussion can be found here
Secondly, this guy has been working on a custom rich text editing control and is offering it under a negotiable licensing agreement.
Finally, you can do it all yourself and create an editor control that implements the UITextInput protocol. Aside from the Apple documentation, there are some tips on doing this here.
Why don't you use attributed string and use its property to set the string as you like.
Reference link : https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/AttributedStrings/Tasks/CreatingAttributedStrings.html