Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

Using the Article Editor (without losing your hair in handfuls)

, 17 Jun 2014
Rate this:
Please Sign up or sign in to vote.
The Article editor does work - but sometimes it does do things the hard way, and tries to frustrate you on purpose, I'm sure...

Editorial Note

Having trouble writing or posting articles? These articles aim to gather together tips and tricks from authors and mentors to help you write great articles.

Introduction

I've been writing stuff here for a while, and every time I do it I end up spending more time faffing about and swearing at the Article Editor than I do actually writing text: and my major problem is getting code samples into the document as code blocks. So lets start by looking at that.

Code blocks

It just hates me, I'm sure.

Let's try: Copy some code from your application, and paste it in:

        /// <summary>
        /// Human readable version
        /// </summary>
        /// <returns></returns>
        public override string ToString()
            {
            return Title + " : " + Path.GetFileName(OldPath);
            }

Nope. not right. This version is better than the last Editor, but it isn't quite right: look at it in the Preview and you'll see:

What we want is:

        /// <summary>
        /// Human readable version
        /// </summary>
        /// <returns></returns>
        public override string ToString()
            {
            return Title + " : " + Path.GetFileName(OldPath);
            }

Fortunately, that isn't as hard to do as it was - in the previous version I ended up switching to HTML mode, pasting the code, then manually adding the <pre> tags:

<pre lang="cs">        /// <summary>
        /// Human readable version
        /// </summary>
        /// <returns></returns>
        public override string ToString()
            {
            return Title + " : " + Path.GetFileName(OldPath);
            }</pre>

Which was clumsy, and a nightmare if you forgot and pasted it into the text, as it applied the code formatter information, but not the code block - and to fix that you had to manually remove all the span tags it had added...and it normally ate all the VS Intellisense parts in comments, sicne they looked like HTML tags to it... Sigh | :sigh:

This version is easy:

1) Paste the code:

        /// <summary>
        /// Human readable version
        /// </summary>
        /// <returns></returns>
        public override string ToString()
            {
            return Title + " : " + Path.GetFileName(OldPath);
            }

2) Highlight it:

3) Go to the toolbar, and click the "Remove Format" button (strictly, you don't have to do this, but just in case:

4) Highlight the code again, and use "Paragraph Format" dropdown to select "Formatted":

5) Use the "Language" drop down to select the appropriate language highlighter:

6) Now, your code looks like this:

And in the preview it looks like this:

Which is what we wanted.

Images

You noticed the images, yes? They are really easy to insert, particularly if you have DropBox installed on your PC. If you do, then whenever you take a screenshot, it is automatically saved to the Dropbox/Screenshots folder for you, so you don't even need a Paint program to include screenshots. Handy...

If you don't have dropbox:

This is more cumbersome: Take the screen shot using the ALT and PRINTSCREEN buttons, and paste it into a new image in your paint program (I use Paint Shop Pro 9 which causes it's own problems, since it disables Aero for compatability, so I have to keep opening and closing it to get consistant looking images). ALT and PRINTSCREEN copys the current window, so if you re-size it to just what you want, you are ready.

Save the file.

If you do have drop box.

Use the ALT and PRINTSCREEN buttons to save the current window. This saves the current window as is, so if you re-size it to just what you want, your file is ready.

Add it to your "Current Files" list:

Easy way: Drag the files from the folder and drop them on the "Target":

This adds them to the "Current Files" list, so all you have to do is place the cursor where you want the image, and click the "Insert image into article" button:

Done!

History

2014-06-17 Original Version

2014-06-17

  • Typo corrected: "teh" became "the".
  • Heading corrected on "History" section.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

OriginalGriff
CEO
Wales Wales
Born at an early age, he grew older. At the same time, his hair grew longer, and was tied up behind his head.
Has problems spelling the word "the".
Invented the portable cat-flap.
Currently, has not died yet. Or has he?
Follow on   Google+

Comments and Discussions

 
BugIronically... PinprofessionalMatt T Heffron17-Jun-14 14:06 
GeneralRe: Ironically... Pinprofessional_Noctis_12-Aug-14 14:44 
GeneralRe: Ironically... PinprotectorOriginalGriff12-Aug-14 18:46 
GeneralRe: Ironically... Pinprofessional_Noctis_12-Aug-14 19:06 
GeneralRe: Ironically... PinprotectorOriginalGriff12-Aug-14 20:19 
GeneralRe: Ironically... Pinprofessional_Noctis_12-Aug-14 21:36 
GeneralMy vote of 5 Pinprofessionalphil.o17-Jun-14 4:22 
QuestionFormatting PinprofessionalKenneth Haugland17-Jun-14 1:00 
AnswerRe: Formatting PinprotectorPete O'Hanlon17-Jun-14 4:20 
GeneralRe: Formatting PinprofessionalKenneth Haugland17-Jun-14 4:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140922.1 | Last Updated 17 Jun 2014
Article Copyright 2014 by OriginalGriff
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid