Nativescript Prettify Code 使用 google-code-prettify 或任何其他插件

Question

我正在尝试在我的应用程序中显示代码。我尝试使用 HtmlView 和 google-code-prettify 但我无法在我的代码中导入 js 文件。我也不确定它是否支持 Nativescript，因为文档只字未提。以下是相关代码示例：

主页.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();
    }
}

我还创建了一个示例游乐场示例https://play.nativescript.org/?template=play-tsc&id=uGaqc3&v=5。

有人知道在 Nativescript 中美化代码的方法吗？

Answer 1

使用 WebView 代替，HtmlView 仅支持非常有限的标签/样式。

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