Compare changes in two different CodeMirror textareas - textarea

I am trying to use two different textareas displaying the same code, but with one master, and another copy. In the copy textarea, I would like to highlight changes, something similar to what GitHub offers when we do some changes.
I was wondering if this is possible or if someone did something similar before. Any advice is welcome.

The CodeMirror Merge add-on is exactly what you want. See the demo, which matches your description.
At first I thought you wanted a separate diff, displayed in a div below your textareas rather than inside one of the textareas, and I wrote the following answer. It may still be useful.
Check out the google-diff-match-patch library, used by the CodeMirror Merge add-on. It’s not a drop-in solution, but it looks like you could use diff_main to get a list of original and changed text, and then display that yourself. The library also provides diff_prettyHtml, which outputs example markup for the diff.

Mergely is another option that produces very nice visual diffs using CodeMirror and is distributed under the GPL, LGPL and MPL licenses. It's GitHub repo is here.
Also Prettydiff which isn't very pretty, but when you click the "execute" button at the bottom you get an interesting visual diff. Not sure if the diff itself is using codemirror or just the two input texts that the diff is generated from.

Related

How to print a file from VsCode?

I want to send the file I'm currently editing to a printer, like I did in Notepad++ for example.
I havn't found any hint on a print command. Is it not possible ?
It is not yet available, but I found an issue report for that feature.
It's currently in the backlog, so we can expect it soon.
https://github.com/Microsoft/vscode/issues/5953
Edit:
In the meantime:
https://marketplace.visualstudio.com/items?itemName=nobuhito.printcode
https://marketplace.visualstudio.com/items?itemName=pdconsec.vscode-print
Now you can install addon for VS Code - search "PrintCode".
Note that the repository for this extension was last updated in February 2018 with numerous issues outstanding.
I found the PrintCode extension inspiring but unfinished and with a number of flaws. In particular it depends on a specific paper size to wrap and as a result does not respond well if you change paper size or orientation in the print dialog.
It's open source so I looked at the code and didn't like that either. No programmer ever likes another's coding style. So I pinched the idea of using a web-browser as platform driver for HTML printing -- my hat is off to the PrintCode author for that cunning insight -- and wrote my own.
In the process I fixed all the known bugs, added everything on my wishlist and a couple of things suggested by others. The biggest thing was figuring out the CSS required to respect print dialog paper size and orientation. This also sorts out the mysterious disappearing line numbers problem, although I'm not sure why. The next biggest thing was learning to probe for an unused port, a problem that also afflicts PrintCode causing the browser to open showing no content.
Major issues
PrintCode depends on a web service. You can't use it offline.
Many people want to be able to open a file, select a portion and print just the selection.
The print dialog supports changing paper size and orientation. This clashes with the way PrintCode works.
Some people like to run multiple VS Code windows.
When you print a markdown file, you probably don't want it printed like a text file when it can be rendered with fonts and proper headings and bullets etc.
Support is required for remote workspaces.
Because each instance of VS Code needs a different port for its embedded webserver, you can't just use a setting. Dynamic port allocation is necessary.
Remote workspaces weren't even a thing until two years after maintenance ceased on PrintCode.
If you want to survey your options, get onto https://marketplace.visualstudio.com, choose the Visual Studio Code tab and search for printing.
If you just want a link to my version, it's here http://marketplace.visualstudio.com/items?itemName=pdconsec.vscode-print.
If you like what you see but need something I haven't thought of, the marketplace page has a link to the repo on github. Create an issue and tell me what you need -- or write it yourself and submit a PR.
Now there is an extension available for printing from the VS Code Editor.
It's called VS Code Printing Free.
I've tried it for a couple of days and it works fine.
Poor man's answer: Copy code to Notepad2 or Notepad++ and print from there.
The colour coding will be different though
You can use an Extension of VS Code: PrintCode
Install extension PrintCode
On Mac: command + shift + P
choose command> PrintCode
I have modified the https://marketplace.visualstudio.com/items?itemName=pdconsec.vscode-print. If you change the values that I have marked in the picture in the extension settings a browser tab opens with the you can then print this also works on the Ipad. It works also with the code-server Version inside a Docker Container.
I put the file on github https://github.com/chrishdx/vsc-print
enter image description here

Is there anyway to change the color of the toolbar in notepad++?

I have tried changing the background color of toolbar in notepad++. I am not been successful so far. Frankly speaking I am not so liking the toolbar color and would like to have a dark background to the toolbar. Is there anyway I can do the same? Thanks in advance
Take a look at this question on Superuser. I haven't tested it, but I think it can help.
below there's the hack (as explained in the link):
The themes, as you guessed, can't do this (they only handle what's in
the text editing window). To change the colors you'll have to make
some very simple changes (since it's only changing color values) to
the source code (download from the site or GitHub).
Extract the file Find the elements whose color you'd like to change,
and change them. All colors I've seen are denoted RGB(xx,xx,xx)
Rebuild (see /readmeFirst.txt once you've extracted) I've just glanced
at these files, but I'm definitely going to work at this a little
tomorrow and I don't mind giving you my results once I've solved it.
Anyway, what I've seen at a glance is that you'll want to look in
/PowerEditor/src/ScitillaComponent/DocTabView (I think)
/PowerEditor/src/WinControls/TabBar
/PowerEditor/src/WinControls/ToolBar That's all I noticed that might
be of interest so far, but again, I'll look at it more tomorrow and
get back to you.
Edit: the official makefile will give some errors, because
/PowerEditor/src/Parameters.h references files incorrectly. Here are
the two I fixed so far:
#include "TinyXml/tinyXmlA/tinyxmlA.h" (line 33)
#include "TinyXml/tinyxml.h" (line 37)
Change those lines in Parameters.h to what I've written to deal with
them. Don't worry about the warnings ("extra tokens after #endif") -
they're just comments.
Edit 2: I'm using VS2012, in which the build process results in
numerous errors. I won't post them here unless someone eventually asks
about them, in which case I'm happy to do so. I should have a working
build up soon!
Edit 3: It seems Notepad++'s provided VS project file was created with
an earlier version of Visual Studio, and in updating the files, Visual
Studio 2012 creates many problems, so if you go that route, use
VS2010.
Edit 4: I didn't make it obvious in Edit 3, but I gave up after
realizing just how difficult it was going to be to get around the VS
errors. I imagine the code has changed significantly since I wrote
this answer as well; unfortunately I didn't note the version, but I'm
sure it was the latest available at time of writing this answer,
which, according to "All versions", was probably either 6.4.1 or
6.4.2. However, I hope this is a useful starting point for anyone else who reads (this answer has received consistent attention since
writing).
As far as I see into details of creation of the user interface elements (buttons, toolbars etc.), the answer is that toolbar color cannot be changed until developer explicitly built such a feature into the application. And N++ has no such a feature if you check its settings.
You can achieve changing of toolbar color by standard way: override toolbar painting routine after you grabbed N++ sources. Then compile custom Notepad++.exe which reflects your change.
If you feel toolbar coloring would be useful not only for you, but for number of users, consider registering a feature request for Notepad++ as many people (including me :)) already did for various features of N++.
Go to Settings> Preferences
Then select Enable dark mode.
Then you have the option to pick colors for the dark mode and can even set custom colors

Markdown parser for markItUp editor or stable WMD-showdown release

A bit of a long-winded question(s)...
Is anyone aware of a markdown parser for markItUp editor? I tried showdown.js but it appears there is no way to integrate it with markItUp. This is despite makrItUp having a configuration API that allows you to specify a custom parser path and variable using previewParserVar and previewParserPath arguments.
In reality I prefer using WMD Editor, but when I tried using the SO version on gitHub I found it to be very buggy. There are so many forks but I'm unable to find a stable one.
I eventually found this fork, jquery-markedit, which is really cool, but when the form is posted, unlike the original wmd-fork, the form does not post the parsed text. The textarea data is posted as plain text. The text is parsed fine for preview, but it seems odd that it's not parsed for submission.
So I decided to resort to markItUp which has a markdown set but does not have a parser.
The version of WMD that SO currently uses is different from that on gitHub wmd-fork - is anyone aware of the current version SO is using and if it is available as open source?
Yes I'm aware of markitup!. I recently (today) tested markitup! and WMD. What strikes me is markitup! seems to have no undo functionality. And the header (h1 - h6) functionality in markitup! requires 6 buttons, but only 1 button in WMD.
Among all WMD repos, I've downloaded and tested these 2 repos, and I think they seem promising (I've tested them only 30 seconds each so I might be very incorrect).
umamo, which (says its commit messages) adds LaTeX math.
klipstein, which fixes buggs and makes | separators visible.
Both are based on the Open Library repo, which I need because it makes it possible to have many editors open at once. However, that fork did lots of refactoring; I don't know if that'll make it messy to merge changes from other branches.
I have no idea which repo Stack Overflow uses.
By the way, here is an interesting showdown.js repo (showdown is the JavaScript implementation of Markdown used by WMD), which implements support for RTL languages (according to its readme file). I'm considering including those changes in yet another WMD repo :-)
https://github.com/hasenj/showdown/tree/
Hope this helps,
Magnus

Online programming editor

For a school project i need to write or use a online programming editor. It is a part of a bigger project. I thought of a java application, php/html/javascript or flash.
I have a couple of things i could do:
Find a good working application and edit it so it works with the rest of the project
Find good parts for a editor and make it working my self (syntax highlighter, auto-indent, autocompletion, etc.)
Combination of those two
Does anybody know a good editor or have tips for this project or a editor?
Thanks for reading,
Leon
For the syntax highlighting and basic editing part, check out my recent question Textarea that can do syntax highlighting on the fly?
Solutions presented there:
CodeMirror
Bespin (Mozilla only, but great)
For the rest - autocompletion etc. - ... Check out the Wikipedia article Comparison of JavaScript-based source code editors
Interested to see what other suggestions come up.
Bespin comes to mind. Though it might be too bleeding edge, depending on how the rest of the project is built/meant to be used (but hey, programmers love bleeding edge).
If you decide to use PHP/HTML/CSS/JavaScript, see GeSHi for syntax highlighting.
I have a side project developed with ACE.
It connects to your server through SFTP and allows you to create new files,read and edit all from your browser with your file tree at sidebar.
Demo at TePe
Code at Github Repo
I found Cobalah Editor it's also built on CodeMirror but with some customization. There are some themes available we can set, increase or decrease font size.

Best method for embedding source code in OpenOffice.org presentations?

When creating (Impress) presentations containing source code snippets, what is the best way of including these snippets in the presentation? If possible, I would like them to be rendered with a fixed-width font and appropriate syntax coloring.
An obvious answer would be to embed a screen captures from a code editor, but this causes problems when showing the presentation on projectors with varying screen resolutions. Maybe it's possible to create a vector graphics image that will scale properly, or even render the code with some macros to provide proper formatting and coloring instead? Do any tools for processing source code in this way exist?
Not sure how Open Office works but I'd imagine it's capable of rendering HTML. If I wish to copy some source code to a blog post, I usually find a tool that allows me to copy the source code as HTML. I suspect this would also work for Open Office.
I think this is what I use for Visual Studio.

Resources