Editing Code Snippets

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

Please do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This forum is for discussing mojoPortal development

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

You can monitor commits to the repository from this page. We also recommend developers to subscribe to email notifications in the developer forum as occasionally important things are announced.

Before posting questions here you might want to review the developer documentation.

Do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.
This thread is closed to new posts. You must sign in to post in the forums.
4/17/2010 8:41:25 AM
Gravatar
Total Posts 13

Editing Code Snippets

I'm trying to write software technical articles containing code snippets.

I'm having a challenging time formatting the code snippets in the articles.

I have two problems:

1) When I copy and paste the code snippet into the article the editor

formats each line of code into it's own code section showing a green bar

on the left side per code statement. Visually, I see a series of disconnected vertical green

bars on the left-side with blank lines between each green bar\code statement.

 

2) The spacing on each code statement is messed up. I have to enter

either spaces or non-breaking spaces   to line up the statements

correctly.

 

I've tried different editors: CKeditor, FCKeditor,

I've tried editing the Html source.

I've tried the editor Paste tool.

I've tried setting the code snippet as preformatted text and then

applying a Code style to the code snippet.

 

But the whole process is taking significantly longer than I expected

and is tiring. I have several dozen articles to copy into a site

and I can't afford to spend a week formatting

code snippets.

 

Any suggestions?

 

Ed

 

4/22/2010 9:26:35 AM
Gravatar
Total Posts 13

Re: Editing Code Snippets

Here's the best process for adding\editing code snippets in an Html content container that I could determine after copying and pasting several code snippets into a Mojoportal site.

  1. Copy the code snippet from the source document. See note below for copying from Microsoft Word.
  2. Open for editing the destination content container in the Mojoportal site.
  3. Click on Source icon in the upper-left corner of the Html editor.
  4. Paste the code snippet into the editor.
  5. Insert <pre> and <code> tags before the code snippet.
  6. Insert </code> and <pre> tags after the code snippet.
  7. Click on Update button or Source icon.

Example:

<pre>

<code>

    A = 1;

</code>

<pre>

Notes:

  • If you copy code snippets from a Microsoft Word document you'll get a ton of formatting commands\tags. In this case paste the text into Notepad, copy and paste the text from Notepad, and then insert into the Mojoportal Html editor.
     
  • If you leave off the <pre></pre> tags the code snippet will lose formatting and you'll have to hand insert non-breaking spaces to reformat the code snippet. That can be tiring. The better approach appears to be enclosing the code snippet with <pre></pre> tags.
     
  • Do not try to set the Code style using the WYSIWYG editor and the Styles drop down list. Doesn't do the right things for me.
     
  • I noticed the WYSIWYG editor might arbitrarily add <pre></pre> and <code></code> tags around text paragraphs, list items, and double up on <code></code> tags. I'm not sure why this happens. Either way you might need to go into HTML editing mode (click Source icon in upper left hand corner of the editor) and hand remove the extra tags.

If any one has additional ideas I'm open to hearing them.

Ed

4/22/2010 9:34:09 AM
Gravatar
Total Posts 18439

Re: Editing Code Snippets

Hi,

Joe Davis pointed this out to me a while back and I plan to integrate it into mojoPortal at some point, just haven't had a chance yet, but one can easily integrate it themselves as well, just a matter of adding css and javascript

http://softwaremaniacs.org/soft/highlight/en/

It does a nice job of code highlighting.

Best,

Joe

You must sign in to post in the forums. This thread is closed to new posts.