HTML output

Continuing our @inner tag implementation from previous chapter, let's add a little descriptive text to each inner method, to make things extra clear.

For this we need to implement a to_html method on our tag class, and define an @html_position variable to mark the spot where we would like our HTML to be injected:

require "jsduck/tag/boolean_tag"

class Inner < JsDuck::Tag::BooleanTag
  def initialize
    @pattern = "inner"
    @signature = {:long => "inner", :short => "in"}
    @html_position = POS_DOC + 0.1
    super
  end

  def to_html(context)
    "<p>This is an inner method, only accessible within the class itself.</p>"
  end
end

Inside the to_html method we just return some static HTML. to_html also takes a parameter, but we'll ignore it for now.

The @html_position is a more interesting beast. The [JsDuck::Tag::Tag][Tag] class defines POS_* constants for all the builtin tags. When defining a custom tag, we want its HTML to be positioned relative to the builtin tags. So we reference the POS_DOC which defines the position of the main documentation block and add a small number to it to have the HTML of our tag be positioned right after it.

The result will look as follows:

The above results looks quite lame though. There's just this gray label and line of text that's indistinguishable from the rest of the documentation. In next chapter we spice things up with some CSS.