上傳后如何在GitHub自述文件中保留HTML格式？

Question

因此，我使用HTML格式化了特定GitHub項目的README.md文件，因為我發現markdown相當有限。 也許我不太熟悉Markdown，或者我更喜歡HTML，但我不確定。 所以問題是，我的本地系統上有README.md文件，當我使用Sublime Text的Markdown插件在瀏覽器上顯示它時，它完全按照我的需要顯示。 但是，當我將本地README.md文件推送到服務器並嘗試在網站上查看它時，格式完全丟失。

本地格式-

GitHub網站視圖-

如您所見，這兩個文件完全不同。 將格式上傳到GitHub服務器后，如何保存格式？

以下是意大利面條的HTML代碼。 這很丑。 我很着急，所以最終得到了如此丑陋的代碼，違反了DRY的各個方面。 請原諒。

    <div class="header" style="width: 100%; display: flex;">
    <div style="font-size: 50px; font-family: arial; width: 50%;"> Blind Reader</div> 
    <div style="width: 50%; text-align: right; display: table; ">
        <span style=" letter-spacing: 5px; padding-left: 150px; font-family: verdana; font-size: 11px;  display: table-cell;vertical-align: middle ;  width: 20px;"> Developers </span>
        <a href="https://github.com/boudhayan-dev" style=" padding-right: 17px;"><img src="images/dev1.png" style="height: 60px; width: 60px;"></a>
        <a href="https://github.com/chinmay4382" style=" padding-right: 17px;"><img src="images/dev2.png" style="height: 60px; width: 60px;"></a>
    </div>
</div>

 <div class="badges-container">
    <div class="badges-body"> 
        [![Ask Me Anything !](https://img.shields.io/badge/Ask%20me-anything-1abc9c.svg?longCache=true&style=plastic)](https://GitHub.com/Naereen/ama) [![made-with-python](https://img.shields.io/badge/Made%20with-Python-blue.svg?longCache=true&style=plastic)](https://www.python.org/) [![GitHub license](https://img.shields.io/github/license/Naereen/StrapDown.js.svg?longCache=true&style=plastic)](https://github.com/Naereen/StrapDown.js/blob/master/LICENSE)  ![PyPI - Status](https://img.shields.io/pypi/status/Django.svg?style=plastic) ![Contributor](https://img.shields.io/badge/Contributors-2-orange.svg?longCache=true&style=plastic) 
    </div>
 </div>


<div class="body-content"> 
    <span style="font-size: 25px; font-family: verdana; color: #64686d;"> Welcome to the <span style="color: #18529b;">Blind Reader</span> project !</span>
    <br>
    <br>
    <div style="font-size: 18px; font-family: verdana; text-align: justify;" class="introduction">Blind Reader is a portable, low-cost, reading device made for the blind people. The Braille machines are expensive and as a result are not accessible to many. <strong>Blind Reader </strong>overcomes the limitation of conventional Braille machine by making it affordable for the common masses. The system uses OCR technology to convert images into text and reads out the text by using Text-to-Speech conversion.The system supports audio output via Speakers as well as headphone. The user also has the ability to pause the audio output whenever he desires. It also has the facility to store the images in their respective book folder, thereby creating digital backup simultaneously. With this system, the blind user does not require the complexity of Braille machine to read a book. All it takes is a button to control the entire system !
    </div>
    <div class="dependency" style="font-family: verdana; font-size: 18px; padding-top: 30px;">
        <span style="font-size: 30px; font-family: verdana; font-weight: 500;">Dependency</span>
        <div style="background:#757a79;height: 1.2px; width: 100%"></div><br>
        <span style="font-size: 18px; font-family: verdana; font-weight: 600;">Hardware Requirements:</span><br>
            <ul>
                <li>Raspberry Pi 3B.</li>
                <li>Pi Camera.</li>
                <li>Speakers / Headphones.</li>
                <li>Push buttons - 2.</li>
                <li>LDR - 1.</li>
                <li>LED - 4.</li>
                <li>Power supply - 5V,2A.</li>
            </ul>
        <span style="font-size: 18px; font-family: verdana; font-weight: 600;">Software Requirements:</span><br>
        <ul>
                <li>Python 3.</li>
                <li>Python Dependencies:</li>
                <ul>
                    <li>Rpi.GPIO</li>
                    <li>Pygame library.</li>
                    <li>picamera library.</li>
                    <li>google-cloud.</li>
                    <li>time.</li>
                    <li>os.</li>
                    <li>datetime.</li>
                </ul>
                <li>Google Cloud API - Vision , Text-to-Speech</li>
            </ul>
    </div>
    <div class="code"  style="font-family: verdana; font-size: 18px; padding-top: 30px;">
        <span style="font-size: 30px; font-family: verdana; font-weight: 500;">Usage</span>
        <div style="background:#757a79;height: 1.2px; width: 100%"></div><br>
    </div>
    <div class="usage-content" style="font-size: 18px; font-family: verdana; text-align: justify;">
        <ul>
            <li>
                Use the following code to install the Google cloud python dependency.<br><br><code>pip3 install --upgrade google-api-python-client<br>pip3 install --upgrade google-cloud-vision<br>pip3 install --upgrade google-cloud
                </code><br><br>
                Use : <a href="https://developers.google.com/api-client-library/python/apis/vision/v1">Google CLoud Vision API </a> for further Details.<br><br>
            </li>
            <li> Activate <strong>Cloud Vision API</strong> and <strong>Google Cloud Text-to-Speech API</strong> by visiting the dashboard and download the Service account credentials (Json file).</li>
            <br>
            <li>
                Connect the hardware as follows:
                <ul>
                    <li>
                        Pi Camera --> Camera Slot in Raspberry Pi 3.
                    </li>
                    <li>
                        Pair Bluetooth Speaker / Insert headphone into Raspberry Pi 3 audio jack.
                    </li>
                    <li>
                        LDR --> GPIO 37.
                    </li>
                    <li>
                        4 LEDs - GPIO 29 , 31 , 33 , 35 respectively.
                    </li>
                    <li>
                        Push Button 1 ( Camera capture ) --> GPIO 16.
                    </li>
                    <li>
                        Push Button 2 ( Play/Pause audio ) --> GPIO 18.
                    </li>
                </ul>
                <br>
            <li>
                Use the following code to start the system:
                <br>
                <code>
                    python3 //path/to/your/final.py/file
                </code>
            </li>
            <br>
            <li>
                Place the image to be read under the camera and press <code> Button 1 </code> to read out a page.
            </li>
        </ul>
    </div>
    <div class="system-images" style="font-family: verdana; font-size: 18px; padding-top: 30px;">
        <span style="font-size: 30px; font-family: verdana; font-weight: 500;">Demonstration</span>
        <div style="background:#757a79;height: 1.2px; width: 100%"></div>
    </div>
    <div class="image-cotainer" style="display: flex;">
        <div class="image1" style="width: 50%"> <img src="images/system1.jpg" style="width: 80%;"></div>
        <div class="image2" style="width: 50%"> <img src="images/system2.jpg" style=" width: 80%; height: 80%; padding-top: 40px;"></div>
    </div>
    <div class="resources-section" style="font-family: verdana; font-size: 18px;">
        <span style="font-size: 30px; font-family: verdana; font-weight: 500;">Resources</span>
        <div style="background:#757a79;height: 1.2px; width: 100%"></div>
    </div>
    <div class="resources-container" style="font-family: verdana; font-size: 18px;">
        <ul><br>
            <li>
                <a href="https://cloud.google.com/python/docs/reference/">Google Cloud Platform.</a>
            </li>
            <li>
                <a href="https://www.pygame.org/news">Pygame python library.</a>
            </li>
            <li>
                <a href="https://www.raspberrypi.org/">Raspberry Pi.</a>
            </li>
            <li>
                <a href="https://www.python.org/">Python.</a>
            </li>
        </ul>
    </div>


</div>

我也看過這個鏈接。 它列出了GitHub白名單中的所有標簽。 正如我所看到的，我使用的幾乎所有標簽都在這里。

請幫忙。

Answer 1

GitHub在github / markup repo中提供了標記過濾的文檔：

該庫將原始標記轉換為HTML。 請參閱下面的支持的標記格式列表。

對HTML進行了清理，積極刪除了可能損害您和您的親屬的東西，例如script標簽，內聯樣式以及class或id屬性。 有關完整的白名單，請參閱清理過濾器。

語法高亮顯示在代碼塊上。 有關語法高亮的更多信息，請參見github / linguist 。

HTML通過html管道中的其他過濾器傳遞，這些過濾器添加了特殊的含義，例如表情符號，任務列表，命名錨點，用於圖像的CDN緩存和自動鏈接。

生成的HTML呈現在GitHub.com上。

請注意，第1步是Markdown處理過程，最有可能返回您期望的結果。 問題開始於步驟2。Github提取了步驟1中返回的HTML，並對其進行了廣泛的清理。 無論源是Markdown，rst，texttile，asciidoc還是任何其他多種源格式，都會執行這種衛生措施。換句話說，這些過濾器與Markdown沒有直接關系。 因此，您的Markdown可能還不錯。

有了廣泛的衛生過濾器，使用Markdown的原始HTML后備廣告所帶來的任何好處都幾乎完全喪失了。 通常，在我希望由GitHub呈現的任何文檔中，我都會堅持使用普通的Markdown，因為使用普通的Markdown幾乎不可能實現所有被過濾器剝離的內容。

如果您確實想找到一些解決方法，那么您將需要自己研究衛生過濾器，以查看是否有任何方法可以得到您想要的東西。 我希望您將無法實現大部分需求。

上傳后如何在GitHub自述文件中保留HTML格式？

問題描述

1 個解決方案

解決方案1
1 2018-06-11 14:48:48

上傳后如何在GitHub自述文件中保留HTML格式？

問題描述

1 個解決方案

解決方案1 1 2018-06-11 14:48:48

解決方案1
1 2018-06-11 14:48:48