Nativescript Prettify Code using google-code-prettify or any other plugin

Question

I am trying to display code in my application. I tried using HtmlView and google-code-prettify but I am not able import js files within my code. I am also not sure if it supports Nativescript as the documents talk nothing about it. Following is relevant code samples:

home-page.xml

<Page loaded="pageLoaded" class="page" xmlns="http://www.nativescript.org/tns.xsd">

    <ActionBar title="Home" class="action-bar">
    </ActionBar>

    <ScrollView>
        <StackLayout class="home-panel">
            <HtmlView html="{{ htmlString }}" />            
        </StackLayout>
    </ScrollView>
</Page>

home-view-model.ts

import { Observable } from 'tns-core-modules/data/observable';

export class HomeViewModel extends Observable {
    htmlString: string = "<pre class=\"prettyprint\"><br/>" +
        "List<MyOrderItemModel> myOrderItemModelList = new ArrayList&lt;&gt;();" +
        "<br/>" +
        "myOrderItemModelList.add(new MyOrderItemModel(R.drawable.tide_prod, 2, \"Tide Detergent\", \"149.50\", \"Ren's Grocery\", \"Juan Dela cruz\", \"Order_Received\", 4, 3));<br/>" +
        "<br/>" +
        "if (myOrderItemModelList.contains(\"Delivered\")) {<br/>" +
        "    MyOrderItemOnProcessAdapter myOrderItemOnProcessAdapter = new MyOrderItemOnProcessAdapter(myOrderItemModelList);<br/>" +
        "    my_orders_recyclerview.setAdapter(myOrderItemOnProcessAdapter);<br/>" +
        "    myOrderItemOnProcessAdapter.notifyDataSetChanged();<br/>" +
        "}<br/>" +
        "  </pre>";

    constructor() {
        super();
    }
}

I have also created a sample playground example https://play.nativescript.org/?template=play-tsc&id=uGaqc3&v=5.

Does anyone know any way to prettify code in Nativescript?

No but i guess it is used to display webpage within your app. Not sure how can I use it to show my custom code? — Rakesh
I understand that but how can any existing plugin be used to beautify the code? — Rakesh

Manoj Manoj · Accepted Answer · 2019-08-24T02:31:37

Use WebView instead, HtmlView support only very limited tags / styles.

XML

<WebView src="{{ htmlString }}" />

JS

htmlString: string = "<script src=\"./code-prettify/loader/run_prettify.js\"></script>" +
        "<pre class =\"prettyprint\"><br/>" +
        "List<MyOrderItemModel> myOrderItemModelList = new ArrayList&lt;&gt;();" +
        "<br/>" +
        "myOrderItemModelList.add(new MyOrderItemModel(R.drawable.tide_prod, 2, \"Tide Detergent\", \"149.50\", \"Ren's Grocery\", \"Juan Dela cruz\", \"Order_Received\", 4, 3));<br/>" +
        "<br/>" +
        "if (myOrderItemModelList.contains(\"Delivered\")) {<br/>" +
        "    MyOrderItemOnProcessAdapter myOrderItemOnProcessAdapter = new MyOrderItemOnProcessAdapter(myOrderItemModelList);<br/>" +
        "    my_orders_recyclerview.setAdapter(myOrderItemOnProcessAdapter);<br/>" +
        "    myOrderItemOnProcessAdapter.notifyDataSetChanged();<br/>" +
        "}<br/>" +
        "  </pre>";

Updated Playground

Nativescript Prettify Code using google-code-prettify or any other plugin

1 Answers