Add color to text while appending to file


#1

I am using NodeJs file sync to append text to a file. However I want to add colors to certain parts of the text. How do I do that?

Relevant Code:-

var file1 = fs.readFileSync(file).toString();
var file2 = fs.readFileSync(output).toString();
var file3 = fs.readFileSync(compare).toString();
var diff = jsdiff.diffWords(file2, file3, {"newlineIsToken": false});
 diff.forEach(function(part){
      fs.appendFileSync(output, part.value); // I want to specify color here depending on whether the part was added or deleted
 });

#2

@DamnedScholar Can you help please?


#3

What do you mean by colours? Plain text files don’t have colours. If you are doing this to an open editor view, then 1) it’s probably easier to use the Atom API to add text, and 2) colours can get complicated.


#4

@aerijo

How do I add text to a file with colors if I have the path to the file using Atom API?

As you can see I am trying to create a diff and I need to use colors to show deleted and inserted text. Therefore I only need two colors.


#5

That’s how you mark a section of text that remains logically stationary. You can give it a class, which can be targeted with CSS.

However, I suggest looking at how the core github shows the diff (or it could be some other built in that shows diffs; I can’t check right now).


#6

So what I figured is that

Create a new instance of each file using the file path. Edit necessary text using marker. I am thinking of keeping some sort of identifier before and after the text to identify the text whose color I want to change.

However there is no way to close a instance of a editor. I can only see atom.workspace.open() and nothing of the form close().


#7

@aerijo Is there any way to change the theme rules for .txt extension from inside of my package?


#8

I am trying to achieve such a kind of view inside a text file. I have spent hours trying to figure out something but I can’t.

The red shows deleted text in diff. The green shows added text.

I generated this view by messing with the HTML in Atom dev mode. How do I do this while appending the text to the file.?

50%20PM


#9

I don’t think you actually want to do what you think you want to do. I understand why and what you want to represent, but for a package you have to consider the broadest possible set of use cases.

Atom is a code editor with monospaced font. Some languages and some developers make use of the even spacing to implement visual systems of organization in their code files. It is entirely possible that your package will come to be used by one of those people in one of those documents, in which case it would be disruptive to insert text that’s supposed to have been deleted just to show the difference.

Since all you need is to display the removed text and highlight the added text, you can mark the Range of the inserted text and add a highlight Decoration to change the color of that range and an overlay (using the same function) to create a tooltip that displays the deleted text. And you can add the .tooltip class to the overlay item so that it uses Atom’s native tooltip styling and your package looks natural.

That’s actually a feature of the Pane API.