Question

所以我使用HTML格式化了特定README.md项目的GitHub文件，因为我发现降价非常有限。也许我不太了解降价或者我更喜欢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>

我也看过这个link。它列出了GitHub列入白名单的所有标签。正如我所看到的，我所使用的几乎所有标签都出现在这里。

请帮忙。

Answer 1

GitHub在github/markup repo：

中记录了标记过滤

此库将原始标记转换为HTML。请参阅下面支持的标记格式列表。

对HTML进行清理，积极删除可能会伤害您和您的亲属的内容，例如script代码，内联样式和class或   id个属性。查看sanitization filter   完整的白名单。

对代码块执行语法突出显示。见github/linguist   有关语法突出显示的更多信息。

HTML通过html-pipeline中添加特殊内容的其他过滤器传递   酱，如   emoji，   task lists，   named anchors，   CDN caching for images，   和   autolinking。

生成的HTML将在GitHub.com上呈现。

请注意，第1步是Markdown处理发生，并且很可能返回您期望的结果。问题从第2步开始.Github采用步骤1中返回的HTML并对其进行广泛的清理。无论来源是Markdown，rst，texttile，asciidoc还是任何其他源格式，这种卫生都会发生。换句话说，这些过滤器与Markdown没有直接关系。所以你的Markdown可能很好。

鉴于广泛的卫生过滤器，使用Markdown的原始HTML后备的任何好处几乎完全丧失。一般来说，我坚持在任何我期望由GitHub呈现的文档中使用简单的Markdown，因为大多数任何被过滤器剥离的东西都无法通过简单的Markdown来实现。

如果您真的想找到一些解决方法，那么您需要自己研究sanitation filter，看看是否有任何方法可以获得您想要的内容。我希望你想要的大部分内容都不可能。

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

1 个答案: