Code file editing capabilities in OneDrive's web interface

Technical Level : Intermediate

Summary
OneDrive.com not only lets you edit various code text files in the browser but also provides IDE type features like syntax highlighting, completion suggestions. Though OneDrive users make use of Office Online to create, edit Office documents but many are not aware of code editing feature.
Details

OneDrive users have been using Office Online in OneDrive . They not only store Office documents but also make use of Office Online for creating, editing , collaborating Office documents in the web browser.

There’s also an option to create ‘Plain Text document’,as many people still like to work with Plain text documents. For a quick to-do lists, jotting down notes, grocery list, for such things, notepad text file is the best. So a normal user can make use of it. But here there’s something for developers too. One can do much more using Plain text documents here. When we save it or rename this text document one can notice kind of option it offers to save the file.

Developers can write code snippets, source code, prototypes, personal projects, students academic projects  etc and save them as code files. So its not just open, create and view Text files in OneDrive but includes a HTML5 based text editor in the web. It offers cool features that  makes it very useful with code files. OneDrive in the browser natively supports viewing and editing many types of text code files like CSS, HTML, JavaScript, C#, PHP, Ruby, PowerShell scripts, registry keys, cmd files and many other code files. When you open a source code file in OneDrive web text editor, it provides line numbers, tab completion, syntax highlighting, code completion suggestions, intellisense, Find & replace, kind of ‘diff’ to track changes and more such features. Let us check some feature details :

Here’s how the OneDrive.com Text Editor looks like. Its just plain Text file is being shown here:

Here’s how a sample .CSS code file looks like in OneDrive.com text editor in browser:

As one can see, it provides Syntax highlighting with Line numbers. One can edit and share the file too.

As you start editing, it provides auto-complete suggestions. Press Ctrl-Space, like you do in Visual Studio to get the list of autocomplete option for multiple matches or press Tab.

For Find and replace box to open, Press Ctrl+F.  The matches are also indicated on the scrollbar for its position.

You also have options in Find  like the Match Case, Match Whole Word and even Use Regular Expression option and some others. 

Clicking on the small arrow besides the Find box , opens up Replace. This also provides options of Replace and Replace All.

If you are using hexcode for colors in the code, the editor shows the equivalent color on hovering over it.

And if  you want to quickly show the code to someone online, you can share the file and can also provide edit options so that he can also change code as per his liking. And now when you open this file, OneDrive will help prevent conflicting changes and will show the changes and provide the option to compare changes before Saving the file.

If you want to compare changes before saving, clicking on Compare Changes will provide side-by-side comparison like a kind of ‘diff’ .

So using such cool features in OneDrive.com text editor, one can edit & share code files on the go doing some light-weight edits. But one should keep in mind that its not an IDE , not a replacement for Visual Studio.  Also some languages like CSS have more IntelliSense built in as compared to other languages like .sql which don’t yet have syntax highlighting or completion suggestions. Syntax and editing only available for supported browsers. So if you haven’t yet tried out this feature, go to OneDrive.com and give it a try!

 

Forum Article Info


Last updated October 27, 2019 Views 2,962 Applies to:
This is great! Can we get this to happen for ".sql" files too?
Is this feature still available? I can't seem to be able to do the above things in my onedrive

Yes, still available, make sure you create file with right extension. Just tried with .CSS and Ctrl+Space bar is providing auto complete option. It may not be providing option like earlier while creating text files , so ensure .txt is removed from file extension and only .CSS, .CS kind of supported code files are created.

Also ensure you sign-in to your OneDrive.com in the browser.

Author at TheWindowsClub:
http://www.thewindowsclub.com/
twitter: @vasudevg

Looks like .sql files are working now and can be edited in browser! 

Great article, many thanks.

Related question: The OneDrive app for iPhone displays .txt files (they actually look very neat), but I cannot seem to edit them. I tried opening them with Word for iPhone, but no joy. Any thoughts?

Thanks

Hendrik

Is there a desktop version of this as well to go with Office365?  I'm teaching computer science in a high school, and I would love to have a desktop version for use in the classroom while the children can use the online version at home, effectively allowing them to work everywhere.  I can use other apps for sure in the classroom, but having a standard format for the students would help them.
Dude, i don't see the new textfile option. o365 business, i can still use editor by putting textfiles on onedrive and then opening them online. Will it work for .acb or .rut even?
Can I turn off autocomplete suggestions when using the online text editor on OneDrive?
I can't seem to change the file extension from .txt, no down caret.