Prettify json & javascript in examples - (jekyll / Liquid)

[relativityboy]

The Liquid json formatter leaves much to be desired. There doesn't appear to be a "pretty" option.

We want a colorized, well-formatted pretty print option that does not rely on .yml or .md formatting

Notes

• This is a spike (research, with optional execution). Time box yourself to no more than one day.
• Possible resource: https://stackoverflow.com/questions/86653/how-can-i-pretty-format-my-json-output-in-ruby-on-rails
• Jekyll currently uses highlighter rouge. A search for highlighter rouge jekyll may yield information (speculation: could be as simple as css formatting once use with .yml is figured out)

AC

• [x] Discovery or implementation of a pretty print filter or utility that can be used with Jekyll
• [x] Documentation of filter/utility/practice as comment on this story
• [x] Decision about inclusion of above filter/utility in our dev portal
• [ ] Optional - at least one use of said filter in our dev portal with .md file
• [ ] Optional - at least one use of said filter in our dev portal with .yml file

[TimCliff]

@relativityboy I did some experimenting on this issue. Here is a branch with some samples: https://github.com/TimCliff/devportal/tree/38_prettify_samples. Are any of these what you are looking for?

I have four sample outputs:

1. {{method.expected_response_json}}
2. {{method.expected_response_json | jsonify}}
3. {{method.expected_response_json | pretty_json }}
4. {{method.expected_response_json | neat_json }}

These output the following for account_history_api.get_transaction: 1.

{"ref_block_num"=>0, "ref_block_prefix"=>0, "expiration"=>"1970-01-01T00:00:00", "operations"=>[], "extensions"=>[], "signatures"=>[], "transaction_id"=>"0000000000000000000000000000000000000000", "block_num"=>0, "transaction_num"=>0}

2.

{"ref_block_num":0,"ref_block_prefix":0,"expiration":"1970-01-01T00:00:00","operations":[],"extensions":[],"signatures":[],"transaction_id":"0000000000000000000000000000000000000000","block_num":0,"transaction_num":0}

3.

{
--
  | "ref_block_num": 0,
  | "ref_block_prefix": 0,
  | "expiration": "1970-01-01T00:00:00",
  | "operations": [
  |  
  | ],
  | "extensions": [
  |  
  | ],
  | "signatures": [
  |  
  | ],
  | "transaction_id": "0000000000000000000000000000000000000000",
  | "block_num": 0,
  | "transaction_num": 0
  | }

4.

{
--
  | "ref_block_num":0,
  | "ref_block_prefix":0,
  | "expiration":"1970-01-01T00:00:00",
  | "operations":[],
  | "extensions":[],
  | "signatures":[],
  | "transaction_id":"0000000000000000000000000000000000000000",
  | "block_num":0,
  | "transaction_num":0
  | }

The third option uses JSON.pretty_generate, which seems to be fairly standard. The fourth option uses JSON.neat_generate, which is someone's custom library but seems to have some additional formatting options available: https://github.com/Phrogz/NeatJSON#options

[inertia186]

I think @TimCliff's branch shows neat_json as the best approach if we adopt one small change, add highlight:

{% highlight json linenos %}{{method.expected_response_json | neat_json }}{% endhighlight %}

[roboza]

I looked at that but that funny outline looks a little silly. I am looking at some other options at the moment too, potentially javascript based plugins

[roboza]

Been fiddling and have this working at the moment.

<pre><code class="language-javascript line-numbers">var query = { tag: 'steemitblog', // This tag is used to filter the results by a specific post tag limit: 5 // This limit allows us to limit the overall results returned to 5 }; </code></pre>

@relativityboy @feruzm @inertia186

[inertia186]

removed macspore d0d81b3e0660665a31233335bb2e9ce9a66506b3

[roboza]

Created Issue at #72

[inertia186]

filter added: d75a13d08b28faa397d649c5a325e266161ea204