StackEdit and Google Drive

The purpose of this exercise is to teach you the basics of markdown using the cloud based StackEdit editor. You will save the document you create in StackEdit to GoogleDrive.

Overview

Complete the following steps:

  • Go to the StackEdit site on the web.
  • Create a markdown document in StackEdit
  • Save the document in your Google Drive Online Presence shared folder

Details

When you first open StackEdit, you will see the Welcome document. This is your best source of online help. You can return to this document by choosing the folder icon in the upper right hand corner of StackEdit.

It is a good idea to become familiar with all the main icons in StackEdit. In the upper right hand corner of StackEdit, reading right to left, are five icons:

  • A folder for selection documents.
  • Trash
  • New Document
  • Publish a document
  • Refresh

In the markdown viewer on the right hand side of stackedit, near the top on the right, you will see will see five more icons. The first is a help icon. If you click it, you will see an overview of some core rules for creating markdown. There is also a TOC icon, second from left, that allows you to navigate through the Welcome Document and any documents you create.

Click the new document icon in the upper right hand corner of StackEdit. You will now see two “columns” of data in your browser. On the left is markdown, and on the right is the output produced when you view markdown in a markdown viewer. If you convert markdown to HTML, it will produce an HTML document that renders a view similar to that seen with a markdown viewer.

After creating a new document, the first thing you do is name it. The focus should be on the title field, which is just to left of the refresh icon referenced earlier. Type in the title StackGoogle-LastName, where LastName is your last name.

To get start working on your new markdown document, create a header with this syntax:

My Markdown Document
====================

That is the words My Markdown Document with a set of equal signs beneath it. Look at the right of StackEdit, where you should see your title in large text appropriate for a header.

Beneath your header, type in some plain text. As you type, you will be able to see the “translated” output of your document on the right. Try, for instance, typing or pasting in this markdown, which represents the first few lines of an early draft of this document:

StackEdit and Google Drive
==========================

The purpose of this exercise is to teach you the basics of
markdown using the cloud based StackEdit editor. You will save
the document you create in StackEdit to GoogleDrive.

Overview
--------

Complete the following steps:

- Create an account in StackEdit.
- Create a markdown document in StackEdit
- Save the document in your Google Drive **Online Presence** shared
folder

The text shown above contains a header 1, some plain text, a header level 2, some more plain text, and a list. You can see that you creat lists by using a hyphon.

Google Drive

Now save your document to Google Drive, in the same folder that you created for the Online Presence assignment.

Click the pound sign icon on the left of StackEdit. Under Synchronize, pick Google Drive. Select Export to Google Drive. The following dialog appears:

Export to Google Drive

Click the options link in the dialog. You should now see something like the image shown above. Do you see the human unreadable id in the Folder ID field? Click the icon to the right of that field to select your folder, which should be your shared folder from the online presence assignment.

Selecting the proper folder is not hard, once you get the hang of it. In the image shown below you can see that I have a selected a folder called Elvenware. Click the Select button at the bottom left of the dialog to put the unreadble ID in your Export to Google Drive dialog, as shown above.

Select the folder, press the select button

The process is simple: Put a check mark before the folder you shared with me. Press the Select button. Now the long ID is in the Folder ID field from the Export to Google Drive Folder dialog.

Press the OK button at the bottom of the dialog to save your markdown to Google Drive.

Contents of Your File

Now that you have the file saved to Google Drive, I want you to edit it in the StackEdit editor. Put the following contents in your document:

  • Select a subject that interests you. It me be place in the world that you like. It might be a subject such as programming, or a book that you read. Try to pick a subject that could have images associated with it, such as Mt. Rainier, a screen shot of a programming editor, or a book cover.
  • Write a few sentences describing your topic.
  • Create a list of three items of interest for your subject.
  • Include a header one, header two, and a list with at least three items.

The end result should be a bit like the sample markdown found earlier in this document. Only it should contain your material, not the introduction to this document.

When you are down, push the synchronize button at the top right of StackEdit. Then Choose the Save As from the pound sign icon on the top left of StackEdit. Save your document as HTML. Upload the HTML to your shared Google Drive folder. The document should be called StackGoogle.html. When you view the document in Google Drive, you should see raw HTML, like this:

<h2 id="stackedit-and-google-drive">StackEdit and Google Drive</h2>

<p>The purpose of this exercise is to teach you the basics of <br>
markdown using the cloud based StackEdit editor. You will save <br>
the document you create in StackEdit to GoogleDrive.</p>

<h2 id="overview">Overview</h2>

<p>Complete the following steps:</p>

<ul>
<li>Create an account in StackEdit.</li>
<li>Create a markdown document in StackEdit</li>
<li>Save the document in your Google Drive <strong>Online Presence</strong> shared <br>
folder</li>
</ul>

Finally, take a screenshot of your document as it appears when you are editing it in StackEdit. You can use the Snipping Tool that ship with windows to capture the image of your editing in your browser. (There are similar tools for Mac and Linux). Save your image as StackGoogle.png to your shared folder.

Turn It In

Submit the URL for shared Google folder. It should contain:

  • StackGoogle.md
  • StackGoogle.html
  • StackGoogle.png

Written with StackEdit.