上传后如何在GitHub自述文件中保留HTML格式? [英] How to retain HTML formatting in GitHub readme file upon upload?
问题描述
所以我使用HTML格式化了特定GitHub项目的README.md文件，因为我发现markdown非常有限.也许我不太熟悉Markdown，或者我更喜欢HTML，但我不确定.所以问题是，我的本地系统上有README.md文件，当我使用Sublime Text的Markdown插件在浏览器上显示它时，它完全按照我的需要显示.但是，当我将本地README.md文件推送到服务器并尝试在网站上查看该文件时，格式会完全丢失.
So i formatted the README.md file of a particular GitHub project using HTML as I found markdown to be quite limiting. Maybe I am not quite well versed with markdown or I prefer HTML, I am not sure. So the issue is, I have the README.md file on my local system and when I display it on browser using a Markdown plugin from Sublime Text, it shows up exactly as I want. But when I push the local README.md file to the server and try to view it in website, the formatting is lost completely.
本地格式-
GitHub网站视图-
GitHub website view -
如您所见，这两个文件完全不同.将格式上传到GitHub服务器后，如何保存格式?
As you can see, the two files are totally different. How can I preserve the formatting once it is uploaded on the GitHub server ?
以下是意大利面条的HTML代码.这是非常丑陋的.我很着急，所以最终得到了这样丑陋的代码，违反了DRY的各个方面.请原谅.
The following is the spaghetti HTML code. It is very ugly. I was in a hurry and so ended up with such ugly code violating every aspect of DRY. Please excuse that for now.
<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">
[](https://GitHub.com/Naereen/ama) [](https://www.python.org/) [](https://github.com/Naereen/StrapDown.js/blob/master/LICENSE)  
</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>
I have also takena look at this link. It lists all the tags that are whitelisted by GitHub. And as I can see almost all the tags I have used are present here.
请帮助.
推荐答案
GitHub文档在 github/中进行了标记过滤.标记回购:
GitHub documents there markup filtering in the github/markup repo:
- 该库将原始标记转换为HTML.请参阅下面的受支持的标记格式列表.
- 对HTML进行了净化处理，积极删除可能损害您和您的亲属的东西，例如
script标签，内联样式和class或id属性.参见消毒 过滤器 以获得完整的白名单. - 语法高亮显示在代码块上.参见 github/linguist 有关语法突出显示的更多信息.
- HTML通过 html-pipeline 中的其他过滤器进行传递， 酱，如 表情符号， 任务 列表， 命名 锚点， CDN缓存用于 图片， 和 自动链接.
- 结果HTML呈现在GitHub.com上.
- This library converts the raw markup to HTML. See the list of supported markup formats below.
- The HTML is sanitized, aggressively removing things that could harm you and your kin—such as
scripttags, inline-styles, andclassoridattributes. See the sanitization filter for the full whitelist. - Syntax highlighting is performed on code blocks. See github/linguist for more information about syntax highlighting.
- The HTML is passed through other filters in the html-pipeline that add special sauce, such as emoji, task lists, named anchors, CDN caching for images, and autolinking.
- The resulting HTML is rendered on GitHub.com.
请注意，第1步是Markdown处理的发生，最有可能返回您期望的结果.问题开始于步骤2.Github提取了步骤1中返回的HTML，并对其进行了广泛的清理.无论源是Markdown，rst，texttile，asciidoc还是任何其他其他源格式，都会执行这种卫生措施.换句话说，这些过滤器与Markdown没有直接关系.因此，您的Markdown可能还不错.
Note that step 1 is were the Markdown processing happens and that most likely returns the results you expect. The problem starts with step 2. Github takes the HTML returned in step 1 and sanitizes it extensively. This sanitation happens regardless of whether the source was Markdown, rst, texttile, asciidoc, or any number of other source formats.In other words, these filters have no direct relation to Markdown. So your Markdown is probably fine.
鉴于使用了广泛的卫生过滤器，使用Markdown原始HTML后备广告所带来的任何好处几乎都被完全丧失了.通常，在我希望由GitHub呈现的任何文档中，我都会坚持使用普通的Markdown，因为使用普通的Markdown几乎不可能实现所有被过滤器剥离的内容.
Given the extensive sanitation filters, any benefits of using Markdown's raw HTML fallback are almost completely lost. Generally, I stick to plain Markdown in any document I expect to be rendered by GitHub as most anything that gets stripped by the filters would not be possible with plain Markdown anyway.
如果您真的想找到一些解决方法，则需要研究卫生过滤器自己查看是否有任何方法可以得到您想要的东西.我希望您将无法实现大部分需求.
If you really want to find some workarounds, then you will need to study the sanitation filter yourself to see if there is any way to get what you want. I expect most of what you want will not be possible though.
这篇关于上传后如何在GitHub自述文件中保留HTML格式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
