Prototyping a code editor with line numbering

Hi!

This could be done without a plug-in, but it does require some javascript to get the height of the text in your edit area: i.e, the height of the HTML span. (It’s super annoying that Axure doesn’t let you get this natively,.) Note that you can add this javascript directly to the Axure file without a plug-in. (It would probably be 5 or so lines of code.)

The strategy would be this;

  • Create a tall text field with a stack of numbers for your row numbers
  • Put that list of numbers in a dynamic panel whose purpose is to clip the numbers list so you only see the top [n] pixels of it.
  • To the right of this dynamic panel, add in your text field for the code editing.
  • As you type in this text filed, trigger javascript that does the following:
    ** Get the height of the span of the code field
    ** Set the height of the dynamic panel (clipping the number list) to the height of the span.

This post shows how to get the width of a field’s span. You’d be getting the height instead.

This post shows how to use javascript to change the height of an Axure widget, which you will be doing for the DP containing the numbers list. (You can ignore most of the code: just look for the resize command.)

If you are not comfortable with javascript or otherwise have trouble getting it working, let me know. I’m happy to create this example.