使用CSS使JSON输出“漂亮”

Question

嘿所有我试图让我的输出在页面上看起来很漂亮使用我找到Original JSFIDDLE的代码：

#!/bin/bash


HOSTS=("atlanta.voip.ms" "atlanta2.voip.ms" "chicago.voip.ms" "chicago2.voip.ms" "chicago3.voip.ms" "chicago4.voip.ms" "dallas.voip.ms" "denver.voip.ms" "denver2.voip.ms" "houston.voip.ms" "houstonnew1.voip.ms" "houstonnew2.voip.ms" "losangeles.voip.ms" "losangeles2.voip.ms" "newyork.voip.ms" "newyork2.voip.ms" "newyork3.voip.ms" "newyork4.voip.ms" "sanjose.voip.ms" "sanjose2.voip.ms" "seattle.voip.ms" "seattle2.voip.ms" "seattle3.voip.ms" "tampa.voip.ms" "tampanew1.voip.ms" "tampanew2.voip.ms" "washington.voip.ms" "washington2.voip.ms" "montreal.voip.ms" "montreal2.voip.ms" "montreal3.voip.ms" "montreal4.voip.ms" "toronto.voip.ms" "toronto2.voip.ms" "toronto3.voip.ms" "toronto4.voip.ms" "vancouver.voip.ms" "vancouver2.voip.ms" "amsterdam.voip.ms" "london.voip.ms" "melbourne.voip.ms" "paris.voip.ms")

Smallest="200000"
Server=""
tLen=${#HOSTS[@]}

#   Slick Progress Bar
#   Created by: Ian Brown (ijbrown@hotmail.com)
#   Please share with me your modifications
# Functions
PUT(){ echo -en "\033[${1};${2}H";}  
DRAW(){ echo -en "\033%";echo -en "\033(0";}         
WRITE(){ echo -en "\033(B";}  
HIDECURSOR(){ echo -en "\033[?25l";} 
NORM(){ echo -en "\033[?12l\033[?25h";}
function showBar {
        percDone=$(echo 'scale=2;'$1/$2*100 | bc)
        halfDone=$(echo $percDone/2 | bc) 
        barLen=$(echo ${percDone%'.00'})
        halfDone=`expr $halfDone + 6`
        tput bold
        PUT 7 28; printf "%4.4s  " $barLen%    
        PUT 5 $halfDone;  echo -e "\033[7m \033[0m" 
        tput sgr0
        }
# Start Script
clear
HIDECURSOR
echo -e ""                                           
echo -e ""                                          
DRAW                                           
echo -e "          PLEASE WAIT WHILE SCRIPT IS IN PROGRESS"
echo -e "    lqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqk"  
echo -e "    x                                                   x" 
echo -e "    mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqj"
echo -e ""
echo -e ""
WRITE             


for (( i=0; i<${tLen}; i++ ))  
do
	
    showBar $i ${tLen}  


	serl=${HOSTS[$i]}
	seru=$(echo "$serl" | tr '[:lower:]' '[:upper:]')
	echo ""
	echo ""
	echo ""
	echo ""
	echo ""
	echo ""
	echo ""
	#this line needs to overwrite completley
	echo -ne "" '\r "              TESTING:"   $seru
	
	

	
	Current1=` ping -c 4 -q -i .2 ${HOSTS[$i]} | grep avg | awk -F'/' '{print $5 }'`

	Current=${Current1/./}

	if [ "$Current" -lt "$Smallest" ]
		then
			Server=${HOSTS[$i]}
			Smallest=$Current
		fi

done

clear
Smallestd=$(echo "$Smallest" | sed 's/...$/.&/')
echo "Fastest Server = $Server  @ $Smallestd ms"

但是，输出JSON如下所示：

如何修改JS代码，以便知道每个“需要自己的行和颜色？（就像第一个值一样，howManyLevels：”5“）