Retaining Syntax in Code Snippets

[dprey]

I'm working on an API document with some code samples. The developer provided the code snippets in Word but when I copy/paste the text into Flare, the syntax is lost (color and block formatting). Is there a way to retain the syntax without mind-numbing local formatting?

I'm on Flare V7 and my outputs for this document will be WebHelp and PDF. Through some research, I found one possible solution but it is only for Flare V6 and does not work for WebHelp or PDF outputs: http://kungfuwit.wordpress.com/2010/12/ ... hter-2010/.

Thanks, Dawn

[crdmerge]

Images, shot with Capture, SnagIt, etc.?


Good luck,
Leon

[dprey]

Hi Leon,

Thanks for the suggestion. However, I need to use text rather than images so the developers can copy the text from the PDF or WebHelp and edit as necessary.

Dawn

[RamonS]

Look into using the <pre> tag, which allows for telling browser to not apply any styling because the portion included in the <pre> tags is already (pre)formatted. Would be nice if Flare could insert that easily, not sure if it can.

[NorthEast]

Have you tried importing the Word document into Flare?

[crdmerge]

If the developers are going to be "editing...as necessary" anyway, why don't you have them export the code snippets as...wait for it...SNIPPETS!

1. Give them a sample snippet file so that they can use it as a template.
2. Establish styles for each color, and tell them what matching classes to insert.
3. Have them export each code snippet into .flsnp files, with the class formatting at the correct lines.
4. Then, simply insert the snippets where needed.

They own the code, they own the conversion...it's a beautiful thing! (If they say they can't do it, push back. Our developers generate .html files with humongous tables, exactly matching our styles.)


Good luck,
Leon

[dprey]

Thank you for all of the suggestions. Importing the Word document into the project retains the color-coding but not all of the spacing. The color-coding is half of the battle, so that works for now.

I like the "snippet for a snippet" idea but since I'm the sole writer here, I'll have to save that for a rainy day.

[RamonS]

The spacing most likely comes in as tabs or as sequence of spaces. That is a concept unknown to web browsers and expected to not work. Not sure if there is a workaround.

[LTinker68]

The <pre> tag will retain the spacing.

[dprey]

When I try to use the <pre> tag and paste in the text, neither color nor spacing is retained. I don't get the "Paste Text" dialog either (where you can choose to paste as a paragraph, inline text, etc.) Am I missing something simple here?

[crdmerge]

I still think that capturing the formatted code into images is your best bet.

Although you say: "I need to use text rather than images so the developers can copy the text from the PDF or WebHelp and edit as necessary," who says they have to edit your "production output" content, and that your captured images cannot be replaced whenever required?

Let them edit the latest Word content (whether in your control or theirs, or shared on a server), then just take new screenshots as needed. This is a next-to-zero-maintenance solution; besides, any content errors are strictly on them (no author errors in whatever conversion process you might find).

I have several of these in my doc, although mine were actually captured from within our application instead of from Word. However, updating them for any reason would take but a minute.


Good luck,
Leon

[whunter]

Users may need/want to copy/paste the code snippets out of the help to use as a starting point when developing <whatever>. That may be the reason for not wanting pictures.

[LTinker68]

When I try to use the <pre> tag and paste in the text, neither color nor spacing is retained.

I don't think it will when you're pasting, but then I've never tried pasting to the <pre> tag before, so it might work. After importing from Word, you can apply the <pre> tag and re-insert the spacing. Or start with the <pre> tag and insert everything

I don't get the "Paste Text" dialog either (where you can choose to paste as a paragraph, inline text, etc.) Am I missing something simple here?

In v7, they switched the behavior a bit. After pasting, if you hover near the last character, you'll see an icon pop up. When you click on it you get options for pasting (paragraph, table, etc.). I don't think <pre> tag is one of the options, though.

[crdmerge]

You can style the pre tag with classes (one for each color?), such as:

pre.red {
color: red;
}

and other font stuff; then, in the topic:

<pre class="red">This text is red</pre>

Since the pre tag is a paragraph element, you won't be able to combine two pre classes on the same line. Instead, you'd either do separate inline styling for a separate word (say, green), or establish a span class for each possible color.

Spaces are retained in this method, and users can copy to their heart's delight!


Good luck,
Leon