QML のソースのハイライトに対応

ブログに QML のソースファイルをアップロードして、ハイライトして表示できるように対応しました。

地道に解析をするコードを JavaScript で頑張って書いて、サーバーサイドで動かしているのでクライアント側の無駄な負荷とか遅延はないはず。

import QtQuick 2.0

Text {
    width: 200; height: 50
    text: 'Hello World!'
}

再帰 のサンプルでもテストテスト。元のソースはこちら。

/* Copyright (c) 2012 Silk Project.
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *     * Redistributions of source code must retain the above copyright
 *       notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above copyright
 *       notice, this list of conditions and the following disclaimer in the
 *       documentation and/or other materials provided with the distribution.
 *     * Neither the name of the Silk nor the
 *       names of its contributors may be used to endorse or promote products
 *       derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL SILK BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

import QtQml 2.0
import Silk.HTML 5.0
import Silk.Utils 1.0

Html {
    Head {
        Title { id: title; text: "recursive" }
    }

    Component {
        id: delegate
        Ul {
            property alias model: repeater.model
            Repeater {
                id: repeater
                Component {
                    Li {
                        Text { text: model.name }
                        Recursive {
                            target: delegate
                            child: model.children
                        }
                    }
                }
            }
        }
    }

    Body {
        H1 { text: title.text }

        Recursive {
            target: delegate
            child: [
                {
                    'name': 'parent'
                    , 'children': [
                        {
                            'name': 'child1'
                            , 'children': [
                                {
                                    'name': 'grandchildren1'
                                }, {
                                    'name': 'grandchildren2'
                                }
                            ]
                        } , {
                            'name': 'child2'
                        }
                    ]
                }
            ]
        }
    }
}