Highlight text in textbox without modifying the markup - google-chrome-extension

I was wondering if it were possible to write an extension for a browser which would change the color of text, or otherwise transform it (underline, bold, etc) without modifying the markup.
As an example:
HTML
<p>Extensions use JS, and have to modify the DOM<p>
Default Rendering
Extensions use JS, and have to modify the DOM
Desired Rendering
Extensions use JS, and have to modify the DOM
Now, I know that Extensions can modify the DOM, and to get what I wanted I could get something like:
<p>Extensions use JS, and <html:span style="font-weight: bold; font-style: italic;">have</html:span> to modify the DOM</p>
So, what I'm trying to do is NOT change the markup, at all. This would be something like the "Highlight all" functionality that you get when you're doing a "Find" on a page.
Current Solution
I found an extension which fits as a viable solution to my problem:
It's All Text!
While I would still like to have native browser highlighting, without modifying the markup, this will do fine.

You could inject CSS to make existing markup behave differently (e.g., p { font-weight:bold; } to bold all <p> elements, or .foo { background-color: green } to alter all elements with a foo class, etc.), but there is almost certainly no extension-level way to accomplish what you want. You'll have to modify the markup of the page if you want to modify arbitrary text on the page.
The only way to do what you want is to hack some low-level code and actually rewrite parts of WebKit and Gecko so that HTML is rendered differently than it should be.

I found an extension which fits as a viable solution to my problem:
It's All Text!
While I would still like to have native browser highlighting, without modifying the markup, this will do fine.
This pulls it out of the page, into an editor, and syncs them up. Works beautifully.

Related

How to change hyperlink color in github markdown

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.

How exactly does Syntax Highlighting work in IDEs?

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.

JS: make browser select-all (Chrome, at least)

I am playing around various ways to try circumvent Cross-origin issues when loading (node, not img) SVG into a local html file. There's no reason I can't just simply use a web-server, but this is for fun/educational purposes.
So, current experiment is this: inside the SVG which is embedded via <object> tag, I have a script which makes a new <text> and writes the entire SVG there. The idea was to write it down, delete all other nodes and make a select-all copy the entire text in the window (it's a pop-up window) and then return to original HTML document to paste the text in and then make my inline SVG!
The parts I have working are all the way up to the 'select-all' piece. I know that we have the ability to select text out of a <textarea> with .select(), but inside of SVG that's not a thing. Now I'm stumped whether it's even possible to dispatch the Cmd+A keys , or anything, in order to get the browser to select-all.
Alternatively I can just change the .svg to '.txt' which would make my pop-up-copy strategy at least work past the select-all part, but if it takes post-processing my svg manually then it defeats the purpose of these experimentations!
Ideas welcome! :)

Xpages OneUI 3.02 paging looks terrible; how to replace with OneUI 2

I prefer OneUI V3.0.2 to 2.0 except for one element, which is paging. I think the new style looks horrible.
Here is an example of the old paging style:
And here is an example of the new styling:
I would like to replace the new styling with the old, but just for this one element, or at least to create my own style for paging.
I have looked at the OneUI documentation, but there is something that I don't understand. I am using a dataView in my layout, but when I go to look at how things are implemented, it always seems that they are using raw html, so there is a table element in there. I don't understand that. I want to know how to style a custom control, not html.
Any help would be greatly appreciated.
Styling is done by your browsers rendering engine. It applies CSS to HTML. That's how it works. So you need to create some CSS with !important to fix it.
Easiest way to figure it out: load the page, use FF or Chrome Dev tools that allow you to live edit the CSS and see the result instantly. Once you have it, copy to a CSS file and add to your project.
Comparing to a V2 page makes it easier to figure out.
Just reading the CSS source is rather a pain. The Dev tools rock

Text Alignment problem

How to control a running text? This is a user generated content, where user used to give with out giving space to the text. for example:
abcdefghabcdefghabcdefghabcdefghabcdefghabcdefghabcdefghabcdefghabcdefgh
This goes beyond the specific block. Is there is a way to wrap the text? how can i control it and i also want that to be worked in ie6 also...
You can make strings with no spaces wrap by using the following CSS property:
word-wrap: break-word;
According to the MDC page on the word-wrap property, it is supported in IE 5.5+, Firefox 3.5+, and Safari 1.0+ (but not Opera).
You could use overflow:scroll; in your CSS, this would put a horizontal scroll bar. Should work in IE.

Resources