html5中preclass,Update <pre class="name"><code> to HTML5 <pre><code class="language-name">

@jgm I would go with possibility 3., with 1. as a second choice, based on the following notes…

Possibility 1. any class after opening code backticks

Performance & Maintenance Issue: Looks up each class against some ever evolving language name list, like PrismJs⇗ or highlight.js⇗ supported languages.

Possibility 2. use language-LANG in markdown

Breaks Markdown Editing Highlights Issue: Breaks source and preview highlighting in many markdown editing environments. Widely used markdown fenced code syntax uses just the language name: c, java, swift, etc as the first word after the opening code fence.

Here is an example from editing markdown in Atom:

ac679b042429da0ffd88f62cf918c526.png

Note: Requiring language- in markdown code fences breaks thousands of markdown files in my use case.

Possibility 3. use first word after opening code backticks

In my use case, the first word (if present) is the code language name.

Always add language- to a single word after the opening code backticks

Fenced C code in markdown input:

94b4337d94151b9893803cf30aa63d4f.png

Renders HTML5 recommendation compliant output:

int i = 0;

Note: may need to recognize no-highlight (in markdown) as a case for not adding any language highlight class when multiple classes are used after an opening code fence. (Just mentioned from completeness … for use cases which also have non language classes... although this is not my current use case.)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,你可以将这段 HTML 代码放到一个模态框的内容,然后在触发模态框的按钮上添加对应的 data-target 和 data-toggle 属性,以便触发模态框的弹出。以下是修改后的代码: ```html <!-- 触发模态框的按钮 --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 打开模态框 </button> <!-- 模态框 --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">修改书籍分类</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <form action="${pageContext.request.contextPath}/type/updateType" method="post"> <div class="modal-body"> <div class="form-group"> <label for="name">书籍分类名称:</label> <input type="text" class="form-control" id="name" name="name" required value="${type.name}"> </div> <div class="form-group"> <input type="hidden" value="${type.tid}" name="tid"> </div> </div> <div class="modal-footer"> <input type="submit" class="btn btn-primary" value="修改"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> </div> </form> </div> </div> </div> ``` 需要注意的是,这里使用了 Bootstrap 框架的模态框组件,需要在页面引入对应的 CSS 和 JS 文件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值