Testcase: http://codepe

<textarea> and <pre> are not aligned when a width is set about codeflask HOT 19 CLOSED

kazzkiq commented on June 22, 2024

and <pre> are not aligned when a width is set<p>from codeflask.</p></section>
</section>

</article>

<article>
  <h2 class="h2">Comments (19)</h2>
  
    
    
<section class="issue-comment">
  <section id="387931036" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/225041?s=30&v=4" alt="scaddenp avatar" />
    <a class="issue-username" href="/scaddenp">scaddenp</a>
    <span class="issue-time"> commented on June 22, 2024 </span>
    
    <span class="issue-vote"> <i class="icon-vote"></i>2 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Thanks very much for your persistence. With new code and one more fiddle to css (background was same colour as text caret), I now have the caret and everything looking nice. I salute your efforts to make life easier for the rest of us.</p><p>from codeflask.</p></section>
</section>

<section class="issue-comment">
  <section id="289043808" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/25231383?s=40&u=a48565cfce580f3dd733842fc5ad9c46d007fea9&v=4" alt="d4hines avatar" />
    <a class="issue-username" href="/d4hines">d4hines</a>
    <span class="issue-time"> commented on June 22, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">I've noticed this too. Can anyone recommend short term fix? Any kind of workaround would do for my purposes.</p><p>from codeflask.</p></section>
</section>

<section class="issue-comment">
  <section id="289058125" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1953194?s=40&u=6e738328d5369d8ceb0b7ebbf1eeaf2dd6734a64&v=4" alt="kazzkiq avatar" />
    <a class="issue-username" href="/kazzkiq">kazzkiq</a>
    <span class="issue-time"> commented on June 22, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/d4hines/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/d4hines">@d4hines</a> These properties seem to quick-fix the issue:</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".CodeFlask__textarea {
  white-space: nowrap;
  overflow-x: hidden;
}"><pre class="notranslate">.<span class="pl-c1">CodeFlask__textarea</span> {
  <span class="pl-c1">white-space</span><span class="pl-kos">:</span> nowrap;
  <span class="pl-c1">overflow-x</span><span class="pl-kos">:</span> hidden;
}</pre></div>
<p dir="auto">While this CSS helps, the real solution will be implementing horizontal scrolling support for CodeFlask. As of today, it only support vertical scrolling it seems.</p><p>from codeflask.</p></section>
</section>

<section class="issue-comment">
  <section id="289887667" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/25231383?s=40&u=a48565cfce580f3dd733842fc5ad9c46d007fea9&v=4" alt="d4hines avatar" />
    <a class="issue-username" href="/d4hines">d4hines</a>
    <span class="issue-time"> commented on June 22, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Thanks for the response! I tried implementing the above CSS, but didn't notice any difference in the issue.</p><p>from codeflask.</p></section>
</section>

<section class="issue-comment">
  <section id="294850564" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1953194?s=40&u=6e738328d5369d8ceb0b7ebbf1eeaf2dd6734a64&v=4" alt="kazzkiq avatar" />
    <a class="issue-username" href="/kazzkiq">kazzkiq</a>
    <span class="issue-time"> commented on June 22, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/d4hines/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/d4hines">@d4hines</a> That must be overriding by another rule. Adding <code class="notranslate">.CodeFlask</code> to the selector should help override it:</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".CodeFlask .CodeFlask__textarea {
  white-space: nowrap;
  overflow-x: hidden;
}"><pre class="notranslate">.<span class="pl-c1">CodeFlask</span> .<span class="pl-c1">CodeFlask__textarea</span> {
  <span class="pl-c1">white-space</span><span class="pl-kos">:</span> nowrap;
  <span class="pl-c1">overflow-x</span><span class="pl-kos">:</span> hidden;
}</pre></div><p>from codeflask.</p></section>
</section>

<section class="issue-comment">
  <section id="294990240" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/25231383?s=40&u=a48565cfce580f3dd733842fc5ad9c46d007fea9&v=4" alt="d4hines avatar" />
    <a class="issue-username" href="/d4hines">d4hines</a>
    <span class="issue-time"> commented on June 22, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Hi Kazzkiq,<br>
I tried adding the code you suggested, but am still getting weird formatting issues. If you have the time, could you look at this JsFiddle I've created and tell me what I'm doing wrong: <a href="https://jsfiddle.net/d4hines/bb02ykx7/" rel="nofollow">https://jsfiddle.net/d4hines/bb02ykx7/</a><br>
Thanks!</p><p>from codeflask.</p></section>
</section>

<section class="issue-comment">
  <section id="295257592" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1953194?s=40&u=6e738328d5369d8ceb0b7ebbf1eeaf2dd6734a64&v=4" alt="kazzkiq avatar" />
    <a class="issue-username" href="/kazzkiq">kazzkiq</a>
    <span class="issue-time"> commented on June 22, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/d4hines/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/d4hines">@d4hines</a> It seems to be a issue with the CSS. The selector is applying same properties to both <code class="notranslate"><pre></code> and <code class="notranslate"><code></code>, where <code class="notranslate"><code></code> shouldn't receive those.</p>
<p dir="auto">The main issue seems to be with <code class="notranslate"><code></code> also receiving <code class="notranslate">position: absolute</code>. Removing that property for this element seems to fix the issue, <strong><a href="https://jsfiddle.net/byw90y7v/" rel="nofollow">as you can see here</a></strong>.</p>
<p dir="auto">So basically a quick-fix should be adding this to your CSS in order to override the property from CodeFlask:</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".CodeFlask .CodeFlask__code {
  position: relative;
}"><pre class="notranslate">.<span class="pl-c1">CodeFlask</span> .<span class="pl-c1">CodeFlask__code</span> {
  <span class="pl-c1">position</span><span class="pl-kos">:</span> relative;
}</pre></div>
<p dir="auto">I will take a closer look to this bug this weekend, until there you can probably run smoothly with the CSS code above.</p><p>from codeflask.</p></section>
</section>

<section class="issue-comment">
  <section id="298265318" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/2962987?s=40&u=62b5482eaa9e0a9454738a05480e3b9613aa56af&v=4" alt="klocus avatar" />
    <a class="issue-username" href="/klocus">klocus</a>
    <span class="issue-time"> commented on June 22, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/kazzkiq/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/kazzkiq">@kazzkiq</a>: Your fix works but after that <code class="notranslate">.CodeFlask__code</code> changes its position. I've dealt with this by adding <code class="notranslate">padding: 0 !important</code>.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/2962987/25569090/4ab292bc-2e10-11e7-8e1c-133023404ca1.png"><img src="https://cloud.githubusercontent.com/assets/2962987/25569090/4ab292bc-2e10-11e7-8e1c-133023404ca1.png" alt="bug" style="max-width: 100%;"></a></p><p>from codeflask.</p></section>
</section>

<section class="issue-comment">
  <section id="305162456" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/27704398?s=30&u=cabe103123e20f5cb4a44e2d32b3a6dcae8d2757&v=4" alt="ivanalemunioz avatar" />
    <a class="issue-username" href="/ivanalemunioz">ivanalemunioz</a>
    <span class="issue-time"> commented on June 22, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/kazzkiq/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/kazzkiq">@kazzkiq</a>  This issue was resolved in commit <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/kazzkiq/CodeFlask/commit/c44116483428bcba97ba933c83d03876a0871c8b/hovercard" href="https://github.com/kazzkiq/CodeFlask/commit/c44116483428bcba97ba933c83d03876a0871c8b"><tt>c441164</tt></a> , but this generated a new bug, solved in Pull request <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="232387154" data-permission-text="Title is private" data-url="https://github.com/kazzkiq/CodeFlask/issues/41" data-hovercard-type="pull_request" data-hovercard-url="/kazzkiq/CodeFlask/pull/41/hovercard" href="https://github.com/kazzkiq/CodeFlask/pull/41">#41</a></p><p>from codeflask.</p></section>
</section>

<section class="issue-comment">
  <section id="319527225" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/225041?s=30&v=4" alt="scaddenp avatar" />
    <a class="issue-username" href="/scaddenp">scaddenp</a>
    <span class="issue-time"> commented on June 22, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">I added <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="232387154" data-permission-text="Title is private" data-url="https://github.com/kazzkiq/CodeFlask/issues/41" data-hovercard-type="pull_request" data-hovercard-url="/kazzkiq/CodeFlask/pull/41/hovercard" href="https://github.com/kazzkiq/CodeFlask/pull/41">#41</a> to my code and it fixed issue with very long text getting truncated in view too. I have issues with very long text getting the caret discordant with underlying text. <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="232387154" data-permission-text="Title is private" data-url="https://github.com/kazzkiq/CodeFlask/issues/41" data-hovercard-type="pull_request" data-hovercard-url="/kazzkiq/CodeFlask/pull/41/hovercard" href="https://github.com/kazzkiq/CodeFlask/pull/41">#41</a> improved (out by only 1 instead of 6-7 characters) but not fixed.</p><p>from codeflask.</p></section>
</section>

<section class="issue-comment">
  <section id="386848306" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1953194?s=40&u=6e738328d5369d8ceb0b7ebbf1eeaf2dd6734a64&v=4" alt="kazzkiq avatar" />
    <a class="issue-username" href="/kazzkiq">kazzkiq</a>
    <span class="issue-time"> commented on June 22, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">This was fixed in <strong>1.0</strong>. Lots of changes though, since its a major version upgrade.</p><p>from codeflask.</p></section>
</section>

<section class="issue-comment">
  <section id="387268037" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/225041?s=30&v=4" alt="scaddenp avatar" />
    <a class="issue-username" href="/scaddenp">scaddenp</a>
    <span class="issue-time"> commented on June 22, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Having some is issues moving from early version to new. I have a prism language definition (sql) included as a js, (eg Prism.languages.sql={comment: etc)<br>
but<br>
sqlflask = new CodeFlask('#codeFlaskSQL', {language: "sql"});<br>
isnt picking it up. Do I need to do an add language? Old version has css file. Incorporated in new?</p><p>from codeflask.</p></section>
</section>

<section class="issue-comment">
  <section id="387273438" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1953194?s=40&u=6e738328d5369d8ceb0b7ebbf1eeaf2dd6734a64&v=4" alt="kazzkiq avatar" />
    <a class="issue-username" href="/kazzkiq">kazzkiq</a>
    <span class="issue-time"> commented on June 22, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/scaddenp/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/scaddenp">@scaddenp</a> You now have to add new languages by using <code class="notranslate">.addLanguage</code> method. Example:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const sqlflask = new CodeFlask('#codeFlaskSQL', {language: "sql"});
sqlflask.addLanguage('sql', {comment: etc...});"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">sqlflask</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">CodeFlask</span><span class="pl-kos">(</span><span class="pl-s">'#codeFlaskSQL'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-c1">language</span>: <span class="pl-s">"sql"</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">sqlflask</span><span class="pl-kos">.</span><span class="pl-en">addLanguage</span><span class="pl-kos">(</span><span class="pl-s">'sql'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-c1">comment</span>: <span class="pl-s1">etc</span><span class="pl-kos">.</span><span class="pl-kos">.</span><span class="pl-kos">.</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div><p>from codeflask.</p></section>
</section>

<section class="issue-comment">
  <section id="387278498" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/225041?s=30&v=4" alt="scaddenp avatar" />
    <a class="issue-username" href="/scaddenp">scaddenp</a>
    <span class="issue-time"> commented on June 22, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">thanks. That works for highlighting. Now to sort out the css miasma...</p><p>from codeflask.</p></section>
</section>

<section class="issue-comment">
  <section id="387281624" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/225041?s=30&v=4" alt="scaddenp avatar" />
    <a class="issue-username" href="/scaddenp">scaddenp</a>
    <span class="issue-time"> commented on June 22, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Hmm.          <code class="notranslate">  <label>Base Query:</label> <div class="codeFlask" id="codeFlaskSQL"></div></code><br>
and stripping out any styling of that div other than body and page locators. I get textarea with no caret and odd location.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/225041/39738162-ab15a020-52dd-11e8-8626-24d690660b03.png"><img src="https://user-images.githubusercontent.com/225041/39738162-ab15a020-52dd-11e8-8626-24d690660b03.png" alt="image" style="max-width: 100%;"></a><br>
I am delving into the css but is this what you expect?</p><p>from codeflask.</p></section>
</section>

<section class="issue-comment">
  <section id="387286402" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/225041?s=30&v=4" alt="scaddenp avatar" />
    <a class="issue-username" href="/scaddenp">scaddenp</a>
    <span class="issue-time"> commented on June 22, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Got the css sorted, except that no text cursor in box no matter what I do. is there an example project using codeflask that could be used for reference?</p><p>from codeflask.</p></section>
</section>

<section class="issue-comment">
  <section id="387435848" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1953194?s=40&u=6e738328d5369d8ceb0b7ebbf1eeaf2dd6734a64&v=4" alt="kazzkiq avatar" />
    <a class="issue-username" href="/kazzkiq">kazzkiq</a>
    <span class="issue-time"> commented on June 22, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/scaddenp/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/scaddenp">@scaddenp</a> You can take a look at the <a href="https://github.com/kazzkiq/CodeFlask/blob/gh-pages/index.html">project website</a>, or take a look at this example here:</p>
<p dir="auto"><a href="https://jsfiddle.net/yx3qpqpe/" rel="nofollow">https://jsfiddle.net/yx3qpqpe/</a></p><p>from codeflask.</p></section>
</section>

<section class="issue-comment">
  <section id="387619860" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/225041?s=30&v=4" alt="scaddenp avatar" />
    <a class="issue-username" href="/scaddenp">scaddenp</a>
    <span class="issue-time"> commented on June 22, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto">Yes, thanks very much for that. What I notice is that editor.js has the codeflask-style that I see on the fiddle. However, the .codeflask-style that is injected when using codeflask.min.js is different.  ie<br>
<code class="notranslate"> .codeflask { position: relative; min-width: 500px; min-height: 400px; border: 1px solid #ccc; overflow: hidden; }</code><br>
compared to<br>
<code class="notranslate"> .codeflask { position: absolute; width: 100%; height: 100%; overflow: hidden; }</code><br>
I have yet to see where this is the issue, but it looks to me as if codeflask.min.js is not reflecting the source code.</p><p>from codeflask.</p></section>
</section>

<section class="issue-comment">
  <section id="387926820" class="issue-head">
    <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1953194?s=40&u=6e738328d5369d8ceb0b7ebbf1eeaf2dd6734a64&v=4" alt="kazzkiq avatar" />
    <a class="issue-username" href="/kazzkiq">kazzkiq</a>
    <span class="issue-time"> commented on June 22, 2024 </span>
    
  </section>
  <section class="markdown markdown-js p-5"><p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/scaddenp/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/scaddenp">@scaddenp</a> You're right. There was an error with the release on npm.</p>
<p dir="auto">It is now fixed and the version <code class="notranslate">1.0.5</code> now uses <code class="notranslate">position: absolute</code> as it should.</p><p>from codeflask.</p></section>
</section>

</article>

<section>
  <h2 class="h2">Related Issues (20)</h2>
  <div class="issue">
    <ul>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/113">Readonly: row height will be added when enter</a> 
          
        </li>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/114">TypeError: Cannot set property 'editorRoot' of undefined</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span>
        </li>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/115">How do I build codeflask from source?</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span>
        </li>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/116">CodeFlask for Calvin-Lisp</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span>
        </li>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/118">Question: project status</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span>
        </li>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/119">Enable Shadow DOM by default</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span>
        </li>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/120">Detatch Prism from CodeFlask</a> 
          
        </li>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/123">Option to add custom event listeners to the CodeFlask textarea</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span>
        </li>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/124">Prism.util.isActive is not a function</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span>
        </li>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/125">Left bracket + enter does not make an additional indent</a> 
          
        </li>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/126">Cursor invisible</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span>
        </li>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/128">Init new CodeFlask and it's all misaligned</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span>
        </li>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/129">How do I change the language of the editor?</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span>
        </li>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/130">Highlight Selected Line</a> 
          
        </li>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/131">CodeFlask is not work Nextjs ?</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span>
        </li>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/132">Add Feature : updateLineNumbers(bool)</a> 
          
        </li>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/133">Enter in "ReadOnly" Mode still adds new lines</a> 
          
        </li>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/136">TypeError: CSS.supports is not a function while running test</a> 
          <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span>
        </li>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/137">Indent with tabs?</a> 
          
        </li>
      
        <li>
          <a href="/kazzkiq/codeflask/issues/139">codeCup : codeFlask Update with additional features</a> 
          
        </li>
      
    </ul>
  </div>
</section>

</main>
        <section id="more" class="flex-none w-full md:w-60 text-gray-600 bg-gray-50 px-5 md:px-3 rounded-md dark-color">
          <div class="w-full md:w-60 h-0.5"></div>
          <section>
            
            
            
<h2 class="h2 py-3.5">Recommend Projects</h2>
            <ul>
              <li class="mb-4">
                
  
              </li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/facebook/react">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://raw.githubusercontent.com/facebook/create-react-app/master/packages/cra-template/template/public/logo192.png"
        alt="React photo"
      />
      
      React
    </a>
  </h3>
  <p class="article-more pt-1">A declarative, efficient, and flexible JavaScript library for building user interfaces.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/vuejs/vue">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67"
        alt="Vue.js photo"
      />
      
      Vue.js
    </a>
  </h3>
  <p class="article-more pt-1">🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/microsoft/TypeScript">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://www.typescriptlang.org/favicon-32x32.png"
        alt="Typescript photo"
      />
      
      Typescript
    </a>
  </h3>
  <p class="article-more pt-1">TypeScript is a superset of JavaScript that compiles to clean JavaScript output.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/tensorflow/tensorflow">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://camo.githubusercontent.com/c04e16c05de80dadbdc990884672fc941fdcbbfbb02b31dd48c248d010861426/68747470733a2f2f7777772e74656e736f72666c6f772e6f72672f696d616765732f74665f6c6f676f5f736f6369616c2e706e67"
        alt="TensorFlow photo"
      />
      
      TensorFlow
    </a>
  </h3>
  <p class="article-more pt-1">An Open Source Machine Learning Framework for Everyone</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/django/django">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars2.githubusercontent.com/u/27804?s=200&v=4"
        alt="Django photo"
      />
      
      Django
    </a>
  </h3>
  <p class="article-more pt-1">The Web framework for perfectionists with deadlines.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/laravel/laravel">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://laravel.com/img/logomark.min.svg"
        alt="Laravel photo"
      />
      
      Laravel
    </a>
  </h3>
  <p class="article-more pt-1">A PHP framework for web artisans</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/d3/d3">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://camo.githubusercontent.com/586ccf0aad9684edc821658cee04146cf36d1f1d5ec904bbefd72728909ccb2e/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667"
        alt="D3 photo"
      />
      
      D3
    </a>
  </h3>
  <p class="article-more pt-1">Bring data to life with SVG, Canvas and HTML. 📊📈🎉</p>
</article>

</li>
              
              <li>
                <div>
                  
                </div>
              </li>
            </ul>
          </section>

<section>
            
            
<h2 class="h2 py-3.5">Recommend Topics</h2>
            <ul>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/topic/javascript">
      
      javascript
    </a>
  </h3>
  <p class="article-more pt-1">JavaScript (JS) is a lightweight interpreted programming language with first-class functions.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/topic/web">
      
      web
    </a>
  </h3>
  <p class="article-more pt-1">Some thing interesting about web. New door for the world.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/topic/server">
      
      server
    </a>
  </h3>
  <p class="article-more pt-1">A server is a program made to process requests and deliver data to clients.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/topic/machine-learning">
      
      Machine learning
    </a>
  </h3>
  <p class="article-more pt-1">Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/topic/visualization">
      
      Visualization
    </a>
  </h3>
  <p class="article-more pt-1">Some thing interesting about visualization, use data art</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/topic/game">
      
      Game
    </a>
  </h3>
  <p class="article-more pt-1">Some thing interesting about game, make everyone happy.</p>
</article>

</li>
              
              <li>
                
              </li>
            </ul>
          </section>

<section>
            
            
<h2 class="h2 py-3.5">Recommend Org</h2>
            <ul>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/facebook">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars.githubusercontent.com/u/69631?v=4"
        alt="Facebook photo"
      />
      
      Facebook
    </a>
  </h3>
  <p class="article-more pt-1">We are working to build community through open source technology. NB: members must have two-factor auth.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/microsoft">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars.githubusercontent.com/u/6154722?v=4"
        alt="Microsoft photo"
      />
      
      Microsoft
    </a>
  </h3>
  <p class="article-more pt-1">Open source projects and samples from Microsoft.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/google">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars.githubusercontent.com/u/1342004?v=4"
        alt="Google photo"
      />
      
      Google
    </a>
  </h3>
  <p class="article-more pt-1">Google ❤️ Open Source for everyone.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/alibaba">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars.githubusercontent.com/u/1961952?v=4"
        alt="Alibaba photo"
      />
      
      Alibaba
    </a>
  </h3>
  <p class="article-more pt-1">Alibaba Open Source for everyone</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/d3">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars.githubusercontent.com/u/1562726?v=4"
        alt="D3 photo"
      />
      
      D3
    </a>
  </h3>
  <p class="article-more pt-1">Data-Driven Documents codes.</p>
</article>

</li>
              
              <li>
                
<article class="small-box">
  <h3 class="article-title">
    <a class="block break-all" href="/tencent">
      
      <img
        loading="lazy"
        class="inline-block w-6 h-6 rounded-md border border-white"
        width="24"
        height="24"
        src="https://avatars.githubusercontent.com/u/18461506?v=4"
        alt="Tencent photo"
      />
      
      Tencent
    </a>
  </h3>
  <p class="article-more pt-1">China tencent open source team.</p>
</article>

</li>
              
              <li>
                
              </li>
            </ul>
          </section>
          
        </section>
      </div>
    </div>

<footer class="sizeing text-xs text-center p-5">
  <div>Friends: 
    <a class="hover:underline" target="_blank" href="https://www.chanpinqingbaoju.com">ProductDiscover</a>
  </div>
  Copyright © 2024 Code Monkey  ❤️ <a class="hover:underline block md:inline" href="mailto:cs.victor.edison@gmail.com">Mail to me</a>
</footer>
  </body>
</html>